![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
html&css的使用过程中,我们经常会遇到很多文字对齐问题。下面我要介绍一个有丁点难的文字对齐问题。
实现效果如下图所示。
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy9BZG1pbmlzdHJhdG9yL0FwcERhdGEvTG9jYWwvWU5vdGUvZGF0YS9xcTkzRDNDNkYyNkZFQ0U2MkUwMjI5RTk2QzlFNTM3OUFDL2ZjNzdlOTg3YjQ4ZDQxYjA4Yzk0OGU2ZmZmNmFjNWJjL3IlN0RfaCU3RGh0bDUlN0Q4Mi5wbmc%3D.png?w=700&webp=1)
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTE1MDg1LzIwMTYwNC85MTUwODUtMjAxNjA0MDExNjQ1MDA5MTAtOTI3MTM5OTA1LnBuZw%3D%3D.png?w=700&webp=1)
两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对齐,如下图所示。
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTE1MDg1LzIwMTYwNC85MTUwODUtMjAxNjA0MDExNjQ1MTYyMDctMTI0NTEyMTI3OC5wbmc%3D.png?w=700&webp=1)
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy9BZG1pbmlzdHJhdG9yL0FwcERhdGEvTG9jYWwvWU5vdGUvZGF0YS9xcTkzRDNDNkYyNkZFQ0U2MkUwMjI5RTk2QzlFNTM3OUFDLzdjNGM3NjZiMjJjNDRkMGM5YWI4N2JjYWZjNWQ2MDNlLzByMGY4emx4ZzB5cC5wbmc%3D.png?w=700&webp=1)
听起来好像挺简单,然而实现起来却。。。。。。
错误做法一:
用一个大块div包住两个div,在大div中设置"text-align:center; ",在小div中设置"text-align:left; "
结果如下图所示。
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTE1MDg1LzIwMTYwNC85MTUwODUtMjAxNjA0MDExNjQ1MzMwODItOTM2ODYxNDM0LnBuZw%3D%3D.png?w=700&webp=1)
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy9BZG1pbmlzdHJhdG9yL0FwcERhdGEvTG9jYWwvWU5vdGUvZGF0YS9xcTkzRDNDNkYyNkZFQ0U2MkUwMjI5RTk2QzlFNTM3OUFDLzVkZDBkMWMzYTM0NTQyMGJiMzlkN2MxNDFmMjJmOGU4L2YlN0Q4dXpjKWElNUJndjAucG5n.png?w=700&webp=1)
因为div会占据一整行,而不能随内容大小自动调节宽度,如果要对大div设置width,这也不好控制,因为万一文段长度改变,那么还是无法实现居中。
错误做法二:
于是我把小div改成span,因为span是行内元素,能随span内的文段宽度来调节自身宽度。结果如下图所示。
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTE1MDg1LzIwMTYwNC85MTUwODUtMjAxNjA0MDExNjQ1NTMzOTQtODc0MzkzNTIwLnBuZw%3D%3D.png?w=700&webp=1)
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy9BZG1pbmlzdHJhdG9yL0FwcERhdGEvTG9jYWwvWU5vdGUvZGF0YS9xcTkzRDNDNkYyNkZFQ0U2MkUwMjI5RTk2QzlFNTM3OUFDL2VhOTU4MzAwYTdjNjRhZDRhNmRkNTQ3MGQyNGNmYjJiL21qbmNjZ3c2MWxAdC5wbmc%3D.png?w=700&webp=1)
因为span自动调节自身宽度(即span宽度等于文段长度),所以"text-align:left; "对它不起作用。
正确做法:
既然块级元素和行内元素都无法实现该效果,那能否折中采取介于它们之间的元素。
对,就是设置"display:inline-block;"。
效果图如下:
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly9pbWFnZXMyMDE1LmNuYmxvZ3MuY29tL2Jsb2cvOTE1MDg1LzIwMTYwNC85MTUwODUtMjAxNjA0MDExNjQ2MDMzMzItNjk0MzkzNzY1LnBuZw%3D%3D.png?w=700&webp=1)
![html&css中的文字对齐问题 html&css中的文字对齐问题](https://image.shishitao.com:8440/aHR0cHM6Ly93d3cuc2h1emhpZHVvLmNvbS9Vc2Vycy9BZG1pbmlzdHJhdG9yL0FwcERhdGEvTG9jYWwvWU5vdGUvZGF0YS9xcTkzRDNDNkYyNkZFQ0U2MkUwMjI5RTk2QzlFNTM3OUFDLzhmZmJhYTRkMTk5ZTRlMzdhZDE4NjY0MDQwNzA5MWZkL2RnJTVCeW9iJTYwanN4bmIucG5n.png?w=700&webp=1)
思路:在一个大div中放置一个小div,小div中包含2个span文段。大div设置"text-align:center; ",让小div居中; 小div设置"display:inline-block;",这样小div就能有行内元素的特性,会根据内容自动调节自己的宽度,再设置"text-align:left; ",让其中的元素左对齐,这样就搞定了。
Tip:小div中的span元素可替换为div等块级元素,小div可替换为span等行内元素。
html代码如下:
<div id="container">
<div id="child-container">
<span class="text">请尽快付款以保证商家能及时提供服务</span><br/>
<span class="text">未支付订单将在半个小时后关闭</span>
</div>
</div>
html代码
css代码如下:
*{
margin:;
padding:;
}
#container {
text-align: center;
background-color: #DBEDFD; //这三句只是为了美观,请忽略。。。
height: 40px;
padding: 15px 0;
}
#child-container {
text-align: left;
display: inline-block;
}
CSS代码