位置相对的水平居中表（宽度是响应式的）

Posted 2023-03-05

【中文标题】位置相对的水平居中表（宽度是响应式的）

【英文标题】：horizontallly center table who's position is relative (width is responsive)

【发布时间】：2014-09-25 02:54:47

【问题描述】：

这是我的 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;

我想将我的表格水平居中，同时它位于屏幕底部（固定）。我读过很多帖子（像这样 CSS horizontal centering of a fixed div?)

解决方案涉及将左侧边距设置为宽度的一半，但是，我不知道宽度，因为我的宽度将响应并取决于用户屏幕。有没有办法在不知道确切宽度的情况下使表格水平居中？

这是一个小提琴： http://jsfiddle.net/p3W4s/

（如果你增加实际小提琴的屏幕，你会看到表格没有居中对齐）。

【问题讨论】：

margin-left:auto; margin-right:auto;

@Sebastien 将该 CSS 应用于表格？如果我给表格一个左边距和右边距自动，它似乎不起作用：jsfiddle.net/6E2G9

【参考方案1】：

将整个宽度设置为 100%，然后将表格放在里面，边距：0 auto， 将对齐一切中心。只需将黄色背景更改为透明即可。

http://jsfiddle.net/yUNuV/

html css

.fixed 
width:100%;
height:40px;
background:yellow;
position:fixed;
bottom:0;

.center 
margin:0 auto;
width: 50%;
height:inherit;
background:red;

【参考方案2】：

这里的代码可以让你看到所有三个居中。我还添加了填充，因为最后一个表已超出屏幕。

#footer table 
position: fixed;
padding-right: 18px;
bottom: 0px;
margin-left: auto;
margin-right: auto;

【讨论】：

嗯，你能给我一个小提琴吗？它似乎在这里不起作用：jsfiddle.net/6E2G9 一旦我扩展了小提琴的屏幕，桌子似乎不在中间。相反，它看起来像是向左对齐。

真的吗？看起来它以我为中心。