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

Question

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

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

page X of N的元素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) -->|

Answer 1

HTML表格

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

JSFiddle演示

该演示显示了各种分页栏， page X of N链接的page X of N的左侧和右侧具有平衡和不平衡链接。 为了使发生的事情变得更加明显，背景颜色已被添加到不同的元素中。

关键点：

• 使用包含3列的表格。 为中间列提供一个小的固定宽度，并且不要为左列和右列指定宽度。 中间列将根据需要进行扩展以适应其内容，并且任何剩余空间将在左右列之间均匀分配。
• 在左右列中添加包装元素。 为包装器提供一个固定的宽度，该宽度足以容纳它所拥有的最大内容量（但这也适合支持的最小屏幕尺寸）。 包装器必须具有相同的宽度，否则中间列将不会居中。
• 将左列与右侧对齐，将右列与左侧对齐（因此两者都朝向中间对齐）。
• 将左包装器的内容与右侧对齐，将右侧包装器对齐到左侧（因此两者的内容朝向中间对齐）。
• 将page X of N链接的居中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;
}

Answer 2

元素未附加到居中元素，因为您将它们浮动到左/右边框。 根据我的理解，为了达到你想要的效果，你应该失去浮动并使整个ul居中。

Answer 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/

Answer 4

尝试位置：绝对的col1,2,4和5左右％？

Answer 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                                |