Html CSS：对齐div内的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5842194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: aligning elements inside a div
提问by luqita
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.
我有一个包含三个元素的 div，但我在正确定位最后一个元素时遇到了问题。左边的div必须在左边，中间的div需要居中，第三个需要在右边。
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:
我的 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>
Any ideas?
有任何想法吗？
Thanks!
谢谢！
回答by lpd
You haven't included css for your container div, but whenever it contains floating elements you should hide overflow like so:
您还没有为容器 div 包含 css，但是只要它包含浮动元素，您就应该像这样隐藏溢出：
#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 时，您正在设置跨越整个容器的边距，因此任何其他元素都将定位在下面的行上。请注意，至少对于大多数现代浏览器而言，进一步. 如果您重新排序元素，如下所示：
<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 supposedto work, would be to use css positioning. Apply the following css:
你应该发现它有效。更好的方法，因为我不太确定这是否应该工作，将使用 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;
}
回答by Jonathan Miller
I think you problem is that you floated the left and right element but not the center one. Try something like this:
我认为你的问题是你浮动了左右元素而不是中心元素。尝试这样的事情：
CSS:
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:
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>
回答by Brent Friar
The problem is specifically that the middle div has a width set but is not floated, meaning it is still a block level element. Even though the div itself does not go the entire width of the container, it is still treated as such. You need to do 2 things - float the middle div, then clear the floats so the container grows with the height of the child divs. The clearfix method is preferred since it does not cause issues with CSS3 properties that naturally extend outside the bounds of the element they are applied to (box-shadow, text-shadow, etc).
问题特别在于中间 div 设置了宽度但没有浮动，这意味着它仍然是块级元素。即使 div 本身没有占据容器的整个宽度，它仍然被视为如此。您需要做两件事 - 浮动中间 div，然后清除浮动，以便容器随着子 div 的高度而增长。clearfix 方法是首选方法，因为它不会导致 CSS3 属性出现问题，这些属性自然会扩展到它们所应用到的元素的边界之外（box-shadow、text-shadow 等）。
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/
回答by Samgraphics
I had the exact same issue. I used this approach. I made the center element display inline-block. That way I didn't have to give the elements specific width or the main container a specific height. The blocks only took up as much space as the content inside. Hope this helps.
我有完全相同的问题。我使用了这种方法。我使中心元素显示内联块。这样我就不必为元素指定特定的宽度或主容器的特定高度。块只占用与内部内容一样多的空间。希望这可以帮助。
.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>strong text
强文本
