这是我的 HTML:
...
<div class="header">
<div class="left">
</div>
<div class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</div>
<div class="right">
</div>
</div>
<!-- And the desired result is: -->
[ [LEFT] [CENTER] [RIGHT] ]
我唯一的 CSS 是:
* {
margin: 0px;
}
img.logo {
display: block; margin-left: auto; margin-right: auto;
}
我真的需要帮助来对齐整个页面上的三个 div。此外,div.center 必须与图像具有相同的大小,即宽度 - 800px 和高度 - 600px。
最佳答案
在我看来它更像是一张 table 而不是分区...
<table class="header"><tr>
<td class="left"></td>
<td class="center">
<img class="logo" src="linktomyimage.com/image.png" />
</td>
<td class="right"></td>
</tr></table>
事后想想 CSS :
table.header{
width: 100%;
border-collapse: collapse;
}
table.header td{
vertical-align: top;
border: 1px solid #404040;
}
table.header td.center{
width: 800px;
height: 600px;
}
这只是一个代码示例,了解思路,并根据自己的需要进行调整^^
关于css - 如何在另一个中对齐多个div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17642662/