Question

对于分页，我想使用这样的元素的水平对齐：

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

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

|<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 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;
}

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                                |

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

5 个答案:

HTML表格