第一种方法:

<style>
*{margin:0;padding:0;}
.box{width:500px;height:300px;border:1px solid #000;text-align: center;}
p{display:inline-block;text-align: left;}
</style>
<div class="box">
<p>水电费水电费水水电费水水电费水电费水水电费水电费水电费费水电费水电费水水电费水电费水电费费电费水电费费</p>
</div> 第二种方法:
<style>
*{margin:0;padding:0;}
.box{width:500px;height:300px;border:1px solid #000;}
p{display:table;margin:0 auto;}
</style>

css实现一行文字居中,多行文字居左的更多相关文章

  1. css--实现一个文字少时居中,文字换行时居左的样式

    前言 最近群里的小伙伴去面试,遇到这样一个问题,面试官问:"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示.", ...

  2. css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS布局,div居中,文字居中

    .main { width: 100%; margin: 0 auto; .banner { img { width: 100%; } } .article { margin-bottom: 100p ...

  4. easyui中datagrid标题居中内容居左实现方式

    easyui中的datagrid使用起来,确实还是挺轻巧方便,但是其中也有不少的问题,尤其遇到客户的一些特殊的需求时往往实现得不是很好.这个时候就需要我们自己动手来修改easyui的源码了.easyu ...

  5. css实现一行文字居中,多行文字左对齐

    问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...

  6. 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式!

    块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...

  7. css 一行或多行文字溢出以...的形式隐藏

    一行文字溢出以...形式隐藏 我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出 ...

  8. css文字居中、图片居中、div居中解决方案

    一.文字居中 若文字只有一行 <!--html代码--> <div class="box"> <p class="text"> ...

  9. CSS多行文字垂直居中的两种方法

    之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中 ...

  10. css一div内文字居中

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. PHP 文件下载 显示进度条

    前台调用:js调用: function downloadfile(id,name,price,curcount_pricelimit){ Date.prototype.Format = functio ...

  2. Activity系列讲解---返回结果的处理

    设想一下:由当前Activity跳转到其它Activity,从其它Activity再返回到当前Activity时,如何获取其它Activity存放的数据?下面用一个例子讲解, 点击selsect按钮跳 ...

  3. CRUD查询

    简单查询: 1.最简单的查询 select*form 表名; *查所有的列select*form info 2.查询指定列 select code,name form info 3.修改结果集的列名 ...

  4. Winform自定义控件基础(一)

    1.设置图像和文字以抗锯齿的方式呈现 g.SmoothingMode = SmoothingMode.AntiAlias; g.TextRenderingHint = TextRenderingHin ...

  5. 解决NetBeans运行web项目时出现的“未能正确设置java DB”问题

    1.在NetBeans导航器中,点击"服务"选项卡: 2.展开"数据库"菜单: 3.在"Java DB"上右键 –> 选择" ...

  6. 用 javassist 来修改 class 文件

    import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; public class Test { ...

  7. C#之反射

    Assembly assembly = Assembly.Load("PeopleDal"); //获取程序集名称 Module[] modules = assembly.GetM ...

  8. JS WEB 交互问题

    1 webView----->js #import "ViewController.h" @interface ViewController () @property (no ...

  9. js与jq对数组的操作

    一.数组处理 1.数组的创建  var arrayObj = new Array(); //创建一个数组  var arrayObj = new Array([size]); //创建一个数组并指定长 ...

  10. 51nod1102(数塔)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1002 题意:中文题诶- 思路:简单dp 从底层往上递推,每个 ...