css两行文字怎么居中左对齐的


<头> <meta name =“viewport”content =“width = device-width，initial-scale = 1 .0”> <title>文本对齐测试</title> <风格> / 最外层容器：固定宽度、居中、灰色背景 / .容器{ 宽度：5 00px； /固定宽度5 00px/ 边距：1 00px 自动； / 水平居中，垂直间距1 00px / 背景颜色：f0f0f0； / 灰色背景 / 边框半径：8 px； / 圆角 / 盒子阴影：0 4 px 8 px rgba(0,0,0,0.1 ); / 阴影效果 / } /所有子div：1 00%宽度，文本居中/ .容器div { 宽度：1 00%； /填充父容器的宽度/ 内边距：2 0px； /填充/ 盒子尺寸：边框盒； / 盒子模型包括填充 / } /第一行文字：居中/ .row1 { 文本对齐方式：居中； /文字中心/ 背景颜色：e6 f7 ff； /浅蓝色背景/ 左上边框半径：8 px； / 左上角圆角 / 边框右上角半径：8 px； / 右上角圆角 / } /第二行文字：左对齐/ .row2 { 文本对齐：左对齐； / 文本左对齐 / 背景颜色：fff2 e6 ； /亮橙色背景/ 边框左下半径：8 px； /左下角圆角/ 边框右下半径：8 px； / 右下角圆角 / } </风格> </头> <正文>
第一行文本居中
这是第一行
如果您在灰色背景上看到白色文本，这实际上是最基本布局的演示。
第二行文本左对齐
这是第二行内容
等等，还有一件事：这里使用了 box-sizing: border-box。
否则，padding会扩展div
<脚本> // 您可以使用这个简单的测试 console.log("最外层div宽度：5 00px，居中"); console.log("2 行文本div宽度：1 00%，第一行居中，第二行左对齐"); </脚本> </正文> </>
这种布局的核心，简单来说就是最外层中心固定宽度，里面两行文字都是1 00%宽度。
我们先来说说最重要的事情。
div 的第一行使用 text-align: center 居中，背景为 e6 f7 ff 浅蓝色。
另一点是保持 text-align: 在 div 的第二行，并使用 fff2 e6 亮橙色作为背景。
还有另一个重要的细节。
div 的两行都填充了 2 0 个像素，并使用 box-sizing: border-box。
否则，内边距将扩大 div 并且它不再是 1 00% 宽。
老实说，这很令人困惑。
很多人不注意这个细节。
我们建议在测试时将宽度调整为5 00px以查看效果（例如将宽度更改为3 00px）。
3 000左右的数据比较有依据。

CSS按钮文字垂直居中技巧与常见陷阱

CSS 按钮文本垂直居中，Flexbox 是最可靠的方法。

删除内边距、高度和纵横比以确定尺寸。

字体大小影响居中，大写字母居中效果更好。

较旧的浏览器使用行高，兼容性很强。

经验之谈，自己掂量一下。