这是我的 HTML:
<div id='footer'>
<table id='headerBar'>
<tr>
<td class='headerBarActualTd'><a href='/' class='headerBarIconLink'></a><a href='/' id='homeIcon'></a></td>
<td class='headerBarSpacingTd'></td>
<td class='headerBarActualTd'><a href='/username/' class='headerBarIconLink'></a><a href='/uesrname/' id='myProfileIcon'></a></td>
<td class='headerBarSpacingTd'></td>
<td class='headerBarActualTd'><a href='/settings/settingsPage/' class='headerBarIconLink'></a><a href='/' id='settingsIcon'></a></td>
</tr>
</table>
</div>
这是我的 CSS:
#footer table {
position: fixed;
bottom: 0px;
margin: 0px auto;
}
#headerBar {
border-collapse: separate;
margin: 0px auto;
width: 100%;
max-width: 1080px;
padding-left: 3px;
padding-right: 2px;
}
#headerBar .headerBarActualTd {
text-align: center;
vertical-align: middle;
width: 33%;
position: relative;
border: 1px solid black;
border-radius: 3px;
padding: 2px;
}
#headerBar .headerBarSpacingTd {
padding: 10px;
}
.headerBarIconLink {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
}
.headerBarIconLink:hover {
border: 1px solid #5f9f9f;
border-radius: 3px;
z-index: 1;
}
我想在我的 table 位于(固定)屏幕底部时水平居中。我读了很多帖子(比如这个 CSS horizontal centering of a fixed div? )
解决方案涉及使宽度的一半左边距,但是,我不知道宽度,因为我的宽度会响应并且取决于用户屏幕。有没有办法在不知道确切宽度的情况下使表格水平居中?
这是一个 fiddle : http://jsfiddle.net/p3W4s/
(如果你增加实际 fiddle 的屏幕,你会看到表格没有居中对齐)。
最佳答案
将整个宽度设置为 100%,然后将表格放入 margin: 0 auto, 将对齐一切中心。只需将黄色背景更改为透明即可。
html
CSS
.fixed {
width:100%;
height:40px;
background:yellow;
position:fixed;
bottom:0;
}
.center {
margin:0 auto;
width: 50%;
height:inherit;
background:red;
}
关于html - 水平居中的表格,其位置是相对的(宽度是响应式的),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25088094/