如何使用 CSS 水平對齊兩個 div 區塊？-css教學-PHP中文網

如何使用 CSS 水平對齊兩個 div 區塊？

Patricia Arquette

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

原創

955 人瀏覽過

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 中，我們：

在此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>

登入後複製

說明：

說明：

說明：

用作兩個> div 區塊的父容器。

#block_container 的 text-align 屬性將內容置中，包括 #bloc1 和 #bloc2。透過將顯示屬性設為內聯 # bloc1 和 #bloc2，它們顯示在同一水平線上。附加說明：使用適當的 HTML 標籤來取代內容放置將原始內容放入

中。對於文本，請使用

例如，或。可以在 jsFiddle 上找到此解決方案的示範。

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