如何使用 CSS 水平对齐两个 div 块？-css教程-PHP中文网

如何使用 CSS 水平对齐两个 div 块？

Patricia Arquette

发布： 2024-11-03 16:40:03

原创

954 人浏览过

How can I align two div blocks horizontally using CSS?

水平定位两个 Div 块

利用 CSS 和 HTML 技术将两个 div 块对齐在同一水平线上。

解决方案：

CSS：

<code class="css">#block_container {
    text-align: center;
}
#bloc1, #bloc2 {
    display: inline;
}</code>

登录后复制

在此 CSS 中，我们：

将父级居中容器（#block_container）使用 text-align: center 水平对齐两个 div 块。
将两个 div 块（#bloc1 和 #bloc2）的显示属性设置为内联，使它们出现在同一行。

HTML:

<code class="html"><div id="block_container">
    <div id="bloc1"><?php echo " version " . $version . " Copyright &copy; All Rights Reserved."; ?></div>  
    <div id="bloc2"><img src="..."></div>
</div></code>

登录后复制

说明：

#block_container div 用作两个 div 块的父容器。
#block_container 的 text-align 属性将内容居中，包括 #bloc1 和 #bloc2。
通过将显示属性设置为内联 # bloc1 和 #bloc2，它们显示在同一水平线上。

附加说明：

使用适当的 HTML 标签代替内容放置将原始内容放入
中。对于文本，请使用
例如，或。
可以在 jsFiddle 上找到此解决方案的演示。

以上是如何使用 CSS 水平对齐两个 div 块？的详细内容。更多信息请关注PHP中文网其他相关文章！