CSS：對齊 div 內的元素

Question

我有一個包含三個元素的 div，但我在正確定位最后一個元素時遇到了問題。 左邊的 div 必須在左邊，中間的 div 需要居中，第三個需要在右邊。

所以，我有類似的東西：

#left-element {
    margin-left: 9px;
    margin-top: 3px;
    float:left;
    width: 13px;
}

#middle-element {
    margin:0 auto;
    text-align: center;
    width: 300px;
}

#right-element {
    float:right;
    width: 100px;
}

我的 html 看起來像這樣：

   <div id="container-div">
        <div id="left-element">
            <img src="images/left_element.png" alt="left"/>
        </div>
        <div id="middle-element">
            I am the text inside the middle element
        </div>
        <div id="right-element">
            I am the text in right element
        </div>
    </div>

有任何想法嗎？

謝謝！

Answer 1

你沒有為你的容器 div 包含 css ，但是每當它包含浮動元素時，你應該像這樣隱藏溢出：

#container {
  overflow: hidden;
  width: 100%; /* for good measure */
}

當您 position 中間 div 時，您正在設置跨越整個容器的邊距，因此任何其他元素都將定位在下面的行上。 請注意，至少對於大多數現代瀏覽器來說，進一步的 . 如果您重新排序元素，如下所示：

<div id="container">
    <div id="left-element">
        <img src="images/left_element.png" alt="left"/>
    </div>
    <div id="right-element">
        I am the text in right element
    </div>
    <div id="middle-element">
        I am the text inside the middle element
    </div>
</div>

你應該會發現它有效。 更好的方法，因為我不太確定這是否應該工作，將使用 css 定位。 應用以下 css：

#container {
  overflow: hidden;
  width: 100%;
  min-height: 36px; /* Remember absolute positioning is outside the page flow! */
  position: relative;
}
#left-element {
  position: absolute;
  left: 9px;
  top: 3px;
  width: 13px;
}
#middle-element {
  margin: 0 auto;
  text-align: center;
  width: 300px;
}
#right-element {
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100px;
}

Answer 2

我認為你的問題是你浮動了左右元素而不是中心元素。 嘗試這樣的事情：

CSS：

<style>
    #container { display:block; margin:0; padding:0; width:640px; height:400px; outline:1px solid #000; }
        #left-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ccc; }
        #middle-element { float:left; display:block; margin:10px 0; padding:0; width:200px; height:380px; background:#eaeaea; }
        #right-element { float:left; display:block; margin:10px; padding:0; width:200px; height:380px; background:#ddd; }
</style>

HTML：

<div id="container">
    <div id="left-element">Left Element</div>
    <div id="middle-element">Middle Element</div>
    <div id="right-element">Right Element</div>
</div>

Answer 3

問題特別是中間 div 設置了寬度但沒有浮動，這意味着它仍然是塊級元素。 即使 div 本身沒有 go 容器的整個寬度，它仍然被視為這樣。 您需要做 2 件事 - 浮動中間 div，然后清除浮動，以便容器隨着子 div 的高度而增長。 首選 clearfix 方法，因為它不會導致 CSS3 屬性出現問題，這些屬性自然延伸到它們所應用的元素的邊界（框陰影、文本陰影等）之外。

http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

Answer 4

我有完全相同的問題。 我使用了這種方法。 我使中心元素顯示內聯塊。 這樣我就不必給元素特定的寬度或主容器特定的高度。 這些塊只占用了與里面的內容一樣多的空間。 希望這可以幫助。

 .main-nav { text-align: center; padding: 2em 3em; background: #f4f4f4; } #logo { margin: 0; width: 50px; float: left; margin-top: 18px; } #logo-link { float: left; display: inline-block; }.name { display: inline-block; }.nav { float: right; margin-top: 18px; }.nav li { float: left; margin-right: 15px; margin-top: 5px; }.nav li:last-child { margin-right: 0; }

 <header class="clearfix"> <div class="main-nav"> <a href="index.html" id="logo-link" class="clearfix"><img src="img/site-logo.svg" alt="Munchies" id="logo"></a> <div class="name"> <h1>The Munchies Family Site</h1> <h2>Designer</h2> </div> <nav class="nav clearfix"> <ul> <li><a href="index.html">Gallery</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </div> </header>

強文本