星空网 > 软件开发 > 网页设计

htmlcss中的文字对齐问题

html&css的使用过程中,我们经常会遇到很多文字对齐问题。下面我要介绍一个有丁点难的文字对齐问题。
实现效果如下图所示。
htmlcss中的文字对齐问题
 htmlcss中的文字对齐问题
两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对齐,如下图所示。
htmlcss中的文字对齐问题
htmlcss中的文字对齐问题
听起来好像挺简单,然而实现起来却。。。。。。


 
错误做法一:
用一个大块div包住两个div,在大div中设置"text-align:center; ",在小div中设置"text-align:left; "
结果如下图所示。
htmlcss中的文字对齐问题
htmlcss中的文字对齐问题
因为div会占据一整行,而不能随内容大小自动调节宽度,如果要对大div设置width,这也不好控制,因为万一文段长度改变,那么还是无法实现居中。
 
错误做法二:
于是我把小div改成span,因为span是行内元素,能随span内的文段宽度来调节自身宽度。结果如下图所示。
htmlcss中的文字对齐问题
htmlcss中的文字对齐问题
因为span自动调节自身宽度(即span宽度等于文段长度),所以"text-align:left; "对它不起作用。
 
正确做法:
既然块级元素和行内元素都无法实现该效果,那能否折中采取介于它们之间的元素。
对,就是设置"display:inline-block;"。
效果图如下:
htmlcss中的文字对齐问题
htmlcss中的文字对齐问题
思路:在一个大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代码如下:
htmlcss中的文字对齐问题htmlcss中的文字对齐问题
<div id="container">  <div id="child-container">    <span class="text">请尽快付款以保证商家能及时提供服务</span><br/>    <span class="text">未支付订单将在半个小时后关闭</span>  </div></div>

html代码

 
css代码如下:
htmlcss中的文字对齐问题htmlcss中的文字对齐问题
 1 *{ 2   margin: 0; 3   padding: 0; 4 } 5 #container { 6   text-align: center; 7   background-color: #DBEDFD;  //这三句只是为了美观,请忽略。。。 8   height: 40px; 9   padding: 15px 0;10 }11 #child-container {12   text-align: left;13   display: inline-block;14 }

CSS代码

 



 





原标题:htmlcss中的文字对齐问题

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

珠海电商培训:https://www.goluckyvip.com/tag/49469.html
广告攻略:https://www.goluckyvip.com/tag/4947.html
珠海智融:https://www.goluckyvip.com/tag/49472.html
珠海综试区:https://www.goluckyvip.com/tag/49473.html
珠江宽频客服电话:https://www.goluckyvip.com/tag/49474.html
株式会社hyk:https://www.goluckyvip.com/tag/49475.html
活动回顾 | 千亚麦佳携手MoonSees呈现精彩亚马逊运营管理课程:https://www.kjdsnews.com/a/1836386.html
生日景点免费 上海景点生日免费景点:https://www.vstour.cn/a/363173.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流