首页 >web前端 >css教程 >如何水平对齐多个DIV块?

如何水平对齐多个DIV块?

Linda Hamilton
Linda Hamilton原创
2024-11-03 14:03:021002浏览

How to Align Multiple DIV Blocks Horizontally?

水平对齐多个 DIV 块

将多个 DIV 块放置在同一水平线上是 Web 开发中常见的布局任务。为此,请按照以下步骤操作:

设置 父级 DIV 并使用 text-align: center;水平对齐子元素。

在父 DIV 中,将子 DIVs 设置为显示:inline;。这使它们可以并排坐在同一行。

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

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

示例内容:

<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 元素内。使用适当的标签,例如

  • 示例:
    <p id="bloc1"><?php echo " version ".$version。" 版权所有 &copy; 保留所有权利。"; ?></p>

演示:
https://jsfiddle.net/

以上是如何水平对齐多个DIV块?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn