第一种方法:

<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. SQL Server子查询实例

    例子一 SELECT COUNT(*) FROM ( SELECT [PersonID] FROM [tbiz_AssScore] GROUP BY PersonID ) M 语法说明: 1).FRO ...

  2. HTTP Header 详解

    HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传 ...

  3. 破解激活Win10无风险?激活后删除激活工具无影响===http://www.pconline.com.cn/win10/693/6932077_all.html#content_page_4

    1Windows激活:测试环境搭建 随着Windows 10的发布,许多用户都用上了这个新一代的操作系统.Windows 10有个最好的设置就是,只要你在已经激活的旧系统中升进行升级操作,就能获得一个 ...

  4. 我常用的那些linux命令

    我常用的那些linux命令 用linux也有些年头了,说来也忏愧,说是有些年头了,其实也还是个不长进的主.记得第一次接触linux是boss跟我说的怎么操作,什么编辑模式,按i,a,o进入编辑模式.在 ...

  5. 按钮button的css样式(扁平化底色)

    .button { background-color: #ff0000; /* Green */ border: none; color: white; font-family:Arial; padd ...

  6. Latex中画出函数文件的调用关系拓扑图

    流程图,思维导图,拓扑图通常能把我们遇到的一些复杂的关系结构用图形的方式展现出来.在Latex中要想画这样的拓扑图,有一个很好用的绘图工具包 pgf/tikz . 1.pgf/tikz的安装:pgf/ ...

  7. 利用html5、websocket和opencv实现人脸检测 (二)

    前一篇的代码在执行时,java.exe占用内存会快速上涨: 在4G内存电脑上,单个连接,会持续上涨到2G多,然后减到1G多,如此循环. 经过一些删减定位,可以确定问题由public byte[] pr ...

  8. JavaScript 操作 Cookie

    转自作者:聂微东出处:http://www.cnblogs.com/Darren_code/      什么是 Cookie “cookie 是存储于访问者的计算机中的变量.每当同一台计算机通过浏览器 ...

  9. Xcode 常用快捷键

    一.Xcode基本快捷键 1.1.新建项目 Shift + CMD + N 1.2.项目中新建文件 CMD + N 1.3.运行 CMD + R 1.4.编译 CMD + B 1.5.停止运行 CMD ...

  10. [图像]判断图片是PNG还是JPG格式

    typedef NS_ENUM(NSInteger, NSPUIImageType) { NSPUIImageType_JPEG, NSPUIImageType_PNG, NSPUIImageType ...