CSS：对齐div内的元素 [英] CSS: aligning elements inside a div

问题描述

我有一个包含三个元素的div，并且在正确定位最后一个元素时遇到问题。左边的分区必须在左边，中间的分区需要居中，第三个分区需要在右边。

所以，我有类似的东西：

 ＃left-element {
 margin-left：9px; 
 margin-top：3px; 
 float：left; 
 width：13px; 
} 
 
＃中间元素{
 margin：0 auto; 
 text-align：center; 
 width：300px; 
} 
 
＃右元素{
 float：right; 
 width：100px; 
} 
  

我的html是这样的：

 < div id =container-div> 
< div id =left-element> 
< img src =images / left_element.pngalt =left/> 
< / div> 
< div id =middle-element> 
我是中间元素内的文本
< / div> 
< div id =right-element> 
我是右元素文本
< / div> 
< / div> 
  

有什么想法？

谢谢！ / p>

解决方案

你没有为你的容器div包括css，但是只要它包含浮动元素，你应该像这样隐藏溢出： p>

  #container {
 overflow：hidden; 
宽度：100％; / *为好措施* / 
} 
  

当您定位中间div时，您正在设置跨越整个容器的边距，所以任何其他元素都位于下面的线上。请注意，至少对于大多数现代浏览器来说，更进一步。如果您重新排序元素，如下所示：

 < div id =container> 
< div id =left-element> 
< img src =images / left_element.pngalt =left/> 
< / div> 
< div id =right-element> 
我是右元素文本
< / div> 
< div id =middle-element> 
我是中间元素内的文本
< / div> 
< / div> 
  

您应该找到它。 更好的方法，因为我不太确定是否应该使用 ，可以使用css定位。应用以下CSS：

  #container {
 overflow：hidden; 
宽度：100％; 
 min-height：36px; / *记住绝对定位在页面流之外！ * / 
位置：相对; 
} 
＃left-element {
 position：absolute; 
 left：9px; 
 top：3px; 
 width：13px; 
} 
＃中间元素{
 margin：0 auto; 
 text-align：center; 
 width：300px; 
} 
＃right-element {
 position：absolute; 
 right：0px; 
 top：0px; 
 width：100px; 
} 
  

I have a div that contains three elements, and I am having problems correctly positioning the last one. The div at the left has to be at the left, the one in the middle needs to be centered, and the third one needs to be to the right.

So, I have something like:

#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;
}

My html looks like this:

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

Any ideas?

Thanks!

解决方案

You haven't included css for your container div, but whenever it contains floating elements you should hide overflow like so:

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

When you position the middle div you are setting margins that span the entire container, so any further elements are getting positioned on the line below. Note, at least for most modern browsers, further. If you reorder your elements, like so:

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

You should find it works. Better method, as I'm not quite sure whether that is supposed to work, would be to use css positioning. Apply the following 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;
}

这篇关于CSS：对齐div内的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！