如何水平對齊多個DIV塊？-css教學-PHP中文網

如何水平對齊多個DIV塊？

Linda Hamilton

發布： 2024-11-03 14:03:02

原創

975 人瀏覽過

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。 " 版權所有© 保留所有權利。"; ?></p>

登入後複製

示範：
https://jsfiddle.net/

以上是如何水平對齊多個DIV塊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！