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

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

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

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

浮动元件应始终直接连接到中心的元件上

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

左外侧
左内侧
始终居中
右外侧
右内侧

但结果如下所示，即浮动元件未“连接”到中心元件：

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

| | |第X页，共N页|
||

元素未附着到居中元素，因为您将它们浮动到左/右边框。据我所知，为了达到您想要的效果，您应该丢失浮点值并将整个

ul

居中不要使任何内容浮动，只需将外部/父元素设置为

文本对齐：居中

像这样：

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

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

左外侧
左内侧
始终居中
右外侧
右内侧

---

Fiddle:

尝试位置：col1、2、4和5的绝对值，左右百分比？

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

演示显示了各种分页条，在

第X页（共N页）链接的左右两侧有平衡和不平衡链接。为了让事情变得更加明显，在不同的元素中添加了背景色

要点：


使用包含3列的表。为中间的列指定一个较小的固定宽度，不要为左侧和右侧的列指定宽度。中间列将根据需要展开以适合其内容，任何剩余空间将在左右列之间均匀分割
在左侧和右侧列中添加包装器元素。给包装一个固定的宽度，这个宽度足够大，可以容纳它所拥有的最大数量的内容（但也可以容纳支持的最小屏幕大小）。包装必须具有相同的宽度，否则中间的列不会居中
将左栏向右对齐，将右栏向左对齐（使两者都朝向中间对齐）
将左包装的内容向右对齐，将右包装的内容向左对齐（这样两个包装的内容都向中间对齐）
在中间列中放置中心<代码>页面的N< /代码>链接。
将出现在
第X页（共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>

我找到了另一个非常简单的解决方案：
将所有内容居中，只需根据需要隐藏元素：
可见性：隐藏
：

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

|始终居中|
|  |
|中心|
这仅在所有元素都存在时有效。一旦一个元素被移除，居中的部分就不再位于中心…不是整个东西都应该居中。只有一个元素。其余元件应连接到侧面。如果只有右边的元素，中心部分仍然保持在中间。我不确定我理解这个问题。我在我的机器上试过上面的代码，效果很好。确保其他CSS不会弄乱格式。我想你不会；）如果你把四个元素放在中心，哪个元素在中心。。？尝试以第二个样本为中心：<代码>页n的n< /代码> n的页面n应该位于uL>我想我必须用表格和列来解决这个问题。表格可以嵌套吗？HTML表格可以根据需要嵌套得很深。
|               <inner left> always centred <inner right> <outer right>   |
| <- left border                      |                   right border -> |
|                                   centre                                |