如何在水平居中元素的左侧或右侧浮动元素？答案

【问题标题】：How to float elements left or right of a horizontally centered element?如何在水平居中元素的左侧或右侧浮动元素？
【发布时间】：2013-06-18 22:20:14
【问题描述】：

对于分页，我想使用如下所示的元素的水平对齐方式：

|<first page> | <previous page> | page X of N | <next page> | <last page>|

元素page X of N 应始终位于整行的中间，即使缺少其他元素之一。例如

|<first page> | <previous page> | page N of N                            |

浮动元素应始终直接附加到中心的元素。

我的方法如下所示（搜索结果表的最后一行）：

<tr colspan="4"><td class="pager">
    <ul style="margin:0;">
        <li style="display:inline-block; float:left;">  outer left  </li>
        <li style="display:inline-block; float:left;">  inner left  </li>
        <li style="display:inline-block; float:none; text-align:center; position:absolute; left:50%; width:100px; margin-left:-50px;">  always centred  </li>
        <li style="display:inline-block; float:right;">  outer right  </li>
        <li style="display:inline-block; float:right;">  inner right  </li>
    </ul>
</td></tr>

但结果看起来像这样，即浮动元素没有“附加”到居中元素：

|<first page> | <previous page> |          page X of N            | <next page> | <last page>|
|<-- (left border)                                                         (right border) -->|

【问题讨论】：

嗯...我想我必须用一张桌子和你的列来解决这个问题。表格可以嵌套吗？
HTML 表格可以根据需要嵌套到最深处。

标签： html css css-float alignment

【解决方案1】：

HTML 表格

基本上，使用具有 3 列的表格。向左右列添加一个固定宽度的包装器，与中间列对齐。

JSFiddle Demo

演示展示了各种分页栏，在page X of N 链接的左侧和右侧有平衡和不平衡的链接。为了让所发生的事情更加明显，我们为不同的元素添加了背景颜色。

要点：

使用包含 3 列的表格。给中间列一个小的固定宽度，不要为左右列指定宽度。中间列将根据需要展开以适应其内容，并且任何剩余空间将在左右列之间平均分配。
在左右列内添加一个包装元素。给包装器一个足够大的固定宽度，以容纳它曾经拥有的最大量的内容（但也将适合支持的最小屏幕尺寸）。包装器必须具有相同的宽度，否则中间列不会居中。
左列右对齐，右列左对齐（因此两者都向中间对齐）。
将左包装器的内容向右对齐，将右包装器的内容向左对齐（因此两者的内容都向中间对齐）。
将居中的page X of N 链接放在中间列中。
将出现在page X of N 左侧的所有链接放在左栏内容包装器中，同样将出现在右侧的所有链接放在右栏内容包装器中。

HTML

<table class="pagination">
    <tr>
        <td class="column1">
            <div class="content">
                <span>left</span>
            </div>
        </td>
        <td class="column2">
            <span>centered</span>
        </td>
        <td class="column3">
            <div class="content">
                <span>right</span>
            </div>
        </td>
    </tr>
</table>

CSS

.pagination {
    width: 100%;
}

.pagination .column1 {
    text-align: right;
}
.pagination .column2 {
    width: 1px;
}
.pagination .column3 {
    text-align: left;
}

.pagination .content {
    display: inline-block;
    width: 200px;
}
.pagination .column1 .content {
    text-align: right;
}
.pagination .column3 .content {
    text-align: left;
}

.pagination span {
    display: inline-block;
    height: 20px;
    white-space: nowrap;
}

【讨论】：

【解决方案2】：

元素未附加到居中元素，因为您将它们浮动到左/右边界。据我了解，为了实现您想要的，您应该失去浮动并将整个ul居中。

【讨论】：

不是整个事情都应该居中。只有一个元素。其余元素应连接到侧面。如果只有右侧的元素，则居中的部分仍应位于中间。
我不确定我是否理解问题所在。我在我的机器上尝试了上面的代码，它工作正常。确保其他一些 CSS 不会弄乱格式。
我认为你没有 ;) 如果你将四个元素居中，哪一个在中心..？尝试将第二个样本居中：<first page> | <previous page> | page N of N - N 的第 N 页应该在
的中间

【解决方案3】：

不要浮动任何东西，只需将外部/父元素设置为text-align: center

像这样：

<ul style="margin:0;  text-align:center;">
        <li style="display:inline-block;">  outer left  </li>
        <li style="display:inline-block;">  inner left  </li>
        <li style="display:inline-block;">  always centred  </li>
        <li style="display:inline-block;">  outer right  </li>
        <li style="display:inline-block;">  inner right  </li>
    </ul>

小提琴：http://jsfiddle.net/LMZsL/

【讨论】：

这仅在所有元素都存在时才有效。一旦删除一个元素，居中的部分就不再位于中心...

【解决方案4】：

try position:absolute for col1, 2, 4 and 5 with left and right % ?

【讨论】：

【解决方案5】：

我找到了另一个非常简单的解决方案：将所有内容居中并根据需要隐藏元素：visibility: hidden:

<div style="text-align: center;">
    <span style="visibility: hidden;">  outer left  </span>
    <span>  inner left  </span>
    always centred
    <span>  inner right  </span>
    <span>  outer right  </span>
</div>

这会导致：

|               <inner left> always centred <inner right> <outer right>   |
| <- left border                      |                   right border -> |
|                                   centre                                |

【讨论】：