首頁 >web前端 >css教學 >如何使用 CSS 水平對齊兩個 div 區塊?

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

Patricia Arquette
Patricia Arquette原創
2024-11-03 16:40:03975瀏覽

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>

說明:
  1. 說明:
說明:

說明:
  • 用作兩個> div 區塊的父容器。
#block_container 的 text-align 屬性將內容置中,包括 #bloc1 和 #bloc2。 透過將顯示屬性設為內聯 # bloc1 和 #bloc2,它們顯示在同一水平線上。 附加說明:使用適當的 HTML 標籤來取代內容放置將原始內容放入
中。對於文本,請使用

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn