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

昨晚，我在思考如何使用代码创建一个简单的布局并尝试一下 CSS 的强大功能。
已创建一个新的 HTML 文件并将其命名为 test.html。

首先，我编写两行文本，将它们包装在 div 中，并为每个 div 添加一个类。
这使得以后在 CSS 中更容易找到它们。


< lang> <头> <meta name="viewport" content="width=device-width,first-scale=1 .0"> <title>检查布局</title> <link rel="stylesheet" href="style.css"> </头> <正文>
这是第一行文本，显示在中间
这是第二行文本，左对齐
</正文> </>
然后是 CSS 部分。
我首先将最外面的div的宽度固定为3 00px并将其居中。
背景涂成灰色，看起来更好。

CSS .容器{ 宽度：3 00px； 保证金：0 自动； 背景颜色：ee；
.行{ 宽度：1 00%； 文本对齐：居中；
.row-2 { 文本对齐：左对齐；
这是关键，我把所有的文字都放在中间了。
但第二行的div特意设置为左对齐。
这样第一行居中，第二行左对齐就达到了效果。

保存后，用浏览器打开，嘿嘿，果然有效！第一行文本位于中间，第二行位于左侧。
我认为为第二行设置单独的左对齐非常重要。
如果不单独放置，可以全部居中。

等等，还有一件事。
我已经尝试过了。
如果第二行div宽度不是1 00%，比如设置为5 0%，居中效果就不明显。
它必须覆盖整个容器才能进行文本对齐。

我突然想到，如果我在里面再添加一个div，嵌套一层，会不会有问题呢？例如，如果我们添加另一个 div 并使文本右对齐，会发生什么？我得再试一次。

这个布局很简单，但很有趣。

html怎么让两个按钮放在同一行？

结论：使用display: inline-block 实现按钮对等。

特别行动： 1 .将按钮的CSS更改为显示：inline-block。

<button style="display: inline-block;">按钮 1 </button> <button style="display: inline-block;">按钮 2 </button>
2 . 确保容器足够宽。
CSS
<!-
在此处放置一个按钮 -->

3 . 浏览器兼容性注意事项：
IE6 +支持内联块
旧版本的 Firefox 需要专有的黑客攻击
不确定，但经验是 Chrome 和 Edge 完全支持它。

自己掂量一下。

html里如何用表格实现两行两列，第一行的第二列