第一种方法:

<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. js 对数据转换成数据容量单位

    function bytesToSize(value) { alert(value); alert('value'); debugger; if (value === 0) return '0 B'; ...

  2. 设置html title标题左侧的小图标

    网页title旁边的小图片设置,图片要求格式必须是.ico,可以使用在线的转换工具把jpg和png图片转换为ico图片,工具地址:http://www.ico.la/ 在html文件中的<hea ...

  3. 在WPF中使用变通方法实现枚举类型的XAML绑定

    问题缘起 WPF的分层结构为编程带来了极大便利,XAML绑定是其最主要的特征.在使用绑定的过程中,大家都普遍的发现枚举成员的绑定是个问题.一般来说,枚举绑定多出现于与ComboBox配合的情况,此时我 ...

  4. c/c++ string

    string类的定义.操作. #include<iostream> #include<string> using namespace std; int main() { // ...

  5. Alipay秘钥问题

    有三种秘钥一个是应用公钥 一个是支付宝公钥 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco } span.s1 { text-d ...

  6. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)[转]

    使用方法 引用css和js <link rel="stylesheet" href="../dist/dropload.min.css"> < ...

  7. [leetcode]leetcode初体验

    这几天把之前的设计模式回顾了一遍,整理了一点以前的项目.同学说,打算刷leetcode题目,也勾起了我的兴趣,索性也刷一些题目,再提高一些内功.刚开始进去,leetcode随机分配的题目,直接也就做了 ...

  8. Pugixml一种快速解析XML文件的开源解析库

    Pugixml是一个轻量级的C++ XML开源解析库,DOM形式的解析器.接口和丰富的遍历和修改操作,快速的解析,此外支持XPath1.0实现数据查询,支持unicode编码: 使用Pugixml可通 ...

  9. ORA-27492 无法运行作业,调度程序不可用

    ORA-27492:无法运行作业;调度程序不可用 ORA-06512: at "SYS.DBMS_ISCHED", line 185 ORA-06512: AT SYS.DBMS_ ...

  10. scikit-learn算法选择图

    图片来自sklearn官网 最近事情弄完一部分了,继续开始python data science!