css中如何写才能让在同一个盒子中换行的文字居中对齐

html-css017

css中如何写才能让在同一个盒子中换行的文字居中对齐,第1张

要想如图二那样的效果，需要设置成左右2个区域，给你写个例子。

<div style="display:flex">

<span style="line-height: 40pxpadding-right:10px">18:00</span>

<span>即将开始<br />距离开始还有1：10：20</span>

</div>

语法： text-align : left | right | center | justify 取值： left :　默认值。左对齐right :　右对齐center :　居中对齐justify :　两端对齐说明：设置或检索对象中文本的对齐方式。

此属性作用于所有块对象(block elements)。在一个 div 对象里的所有块对象的会继承此属性值。 假如属性没有设置，这个参数将获取 null 值。 法：text-justify : auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper 取值： auto :　默认值。允许浏览器代理用户确定使用的两端对齐法则distribute :　处理空格很像 newspaper ，适用于东亚文档。尤其是泰文distribute-all-lines :　两端对齐行的方式与 distribute 相同，也同样不包含两段对齐段落的最后一行。适用于表意字文档distribute-center-last :　未实现inter-cluster :　调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的inter-ideograph :　为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格inter-word :　通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效kashida :　通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持newspaper :　通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式说明：设置或检索对象内调整文本使用的对齐方式。

因为这个属性影响文本布局，所以 text-align 属性必须被设置为 justify 。

此属性只作用于块对象。

还有你设置高度，又设置了隐藏后，最下方还有半个字露出来了，你可以把行距line-height:值加大一点嘛