如何使用 CSS 将两个 Div 块对齐在同一行？-css教程-PHP中文网

如何使用 CSS 将两个 Div 块对齐在同一行？

Patricia Arquette

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

原创

472 人浏览过

How do I align two Div blocks on the same line using CSS?

在同一行上对齐两个 div 块

要将两个 div 块在同一行上对齐，您可以使用 CSS 属性，例如 text-align 和 display。

CSS:

<code class="css">#block_container {
    text-align: center;
}

#bloc1, #bloc2 {
    display: inline;
}</code>

登录后复制

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>

登录后复制

请遵循以下准则以确保正确对齐：

将 div 块包裹在容器 div (#block_container) 中，并将其文本对齐设置为居中。
将 div 块（#bloc1 和 #bloc2）的显示属性设置为内联让它们出现在同一行。
为了获得最佳实践，请避免将原始内容直接放入 div 标签中，而应使用语义标签，例如
或用于文本。

通过应用这些样式，两个 div 块将在其容器内的同一行上水平对齐。

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