纯CSS实现文字一行居中，多行左对齐的方法

　　其实这种需求还是蛮常见的，主要用于产品列表页面，用于产品图片下面，显示产品的名称。

　　想要实现的效果为：

　　　　未知文字长度，当文字长度小于盒子宽度，也就是一行时，文字居中。
　　　　当文字长度大于盒子的宽度，会自动换行，成为多行文字，此时文字左对齐。

1、利用行内元素：

　　我首先想到了这个思路，思路如下：

　　　　让P居中，P中的文字左对齐：（P的父级text-align:center; P自身text-align:left;）

　　　　P的宽度根据文字的宽度伸缩，当文字为一行时，则P的宽度小于LI的宽度，居中；则看上去文字是局中的。

　　　　当大于一行时，P的宽度和LI的宽度是一致的，文字就居左了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文字测试</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}body {font-size:16px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1.5;}ul {width: 500px; margin: 100px auto; overflow: hidden;}/*代码开始*/li {/* 这些都不重要 */float: left;width: 150px;background: #fafafa;height: 50px;margin-right: 10px;/* 重点 */text-align: center;}/* 重点 */  display: inline-block使P的宽度根据文字的宽度伸缩p {display: inline-block;text-align: left;}</style>
</head>
<body>
<ul><li><p>一行文字</p></li><li><p>这里是比较长的两行文字</p></li>
</ul>
</body>
</html>

　　效果：

2、利用万能的表格

　　HTML代码和解决方法一是一致的。主要是利用了table的牛逼特性：未知宽度的table 也是可以左右对齐的！

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文字测试</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;font-weight: normal;font-style: normal;}body {font-size:16px;font-family:tahoma,Helvetica, Arial,"\5FAE\8F6F\96C5\9ED1";line-height: 1.5;}ul {width: 500px; margin: 100px auto; overflow: hidden;}/*代码开始*/li {/* 这些都不重要 */float: left;width: 150px;background: #fafafa;height: 50px;margin-right: 10px;}/* 重点 */p {display: table;margin: 0 auto;}</style>
</head>
<body>
<ul><li><p>一行文字</p></li><li><p>这里是比较长的两行文字</p></li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/goloving/p/7657246.html

纯CSS实现文字一行居中，多行左对齐的方法相关推荐

css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
CSS实现文字少居中换行居左
"用 css 对一行文字进行布局,当文字不够换行的时候,这行文字要居中显示,当文字出现换行的时候,这行文字要靠左显示." 效果如上,如果直接居中的话会出现这种效果: 实现方式如下: ...
纯css控制文字显示隐藏
纯css控制文字显示隐藏用到css 伪类 :checked :checked 选择器匹配每个已被选中的 input 元素(只用于单选按钮和复选框). html <div class=" ...
css div 文字内容居中
css div 文字内容居中 .选择器{text-align:center; }
Android Textview 一行居中两行居左
需求描述: 采用鸿洋大神打造的万能的ListView GridView适配器: ListView中的item中有一个TextView,该TextView的宽度确定,根据要显示的内容长度动态调整文字的显 ...
码匠编程：CSS让元素绝对居中，你知道几种方法？
经常碰到有同学在问,如何让一个元素上下左右都居中呢? 相信大家在面试的时候也会经常碰到这个问题,一下列出来几种方式以供大家参考,如有不足之处,请大家补充问题描述: 给定两个元素,这两个元素是父子级关 ...
HTML+CSS中文字两边线水平居中且两边对齐
HTML+CSS中文字两边线水平居中且两边对齐 HTML+CSS想要文字两边出现水平居中的线且根据盒子的宽度两边对齐,水平居中, 这样的话可以用这样伪类来实现效果. <CSS部分> .t ...
html 弹出层边框半透明,js+CSS实现弹出居中背景半透明div层的方法
本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: js+CSS弹出居中的背景半透明div层 body{margin:0px;} #bg{widt ...
纯css控制文字2行显示多余部分隐藏
在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...

纯CSS实现文字一行居中，多行左对齐的方法

纯CSS实现文字一行居中，多行左对齐的方法相关推荐

最新文章

热门文章