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

水平定位两个 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="/static/imghwm/default1.png" data-src="..." class="lazy" alt="如何使用 CSS 水平对齐两个 div 块？" ></div>
</div></code>

说明：

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

附加说明：

• 使用适当的 HTML 标签代替内容放置将原始内容放入
  中。对于文本，请使用

  例如，或 。

• 可以在 jsFiddle 上找到此解决方案的演示。