如何在水平居中元素的左侧或右侧浮动元素? [英] How to float elements left or right of a horizontally centered element?

问题描述

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

For the pagination I'd like to use a horizontal alignment of elements looking like this:

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

元素N的第X页应该始终位于整行的中间，即使缺少其他元素之一.例如

The element page X of N should always stay in the middle of the whole line, even if one of the other elements is missing. E.g.

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

浮动元素应始终直接附加到中间的元素上.

The floating elements should always be attached directly to the element in the centre.

我的方法如下所示(搜索结果表的最后一行):

My approach looks like this (last row of a search results table):

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

但是结果看起来像这样，即浮动元素未附加"到居中元素:

But the result looks like this, i.e. the floating elements are not "attached" to the centred element:

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

推荐答案

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

I found another, quite simple solution: Centre everything and just hide the elements as required: 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                                |

这篇关于如何在水平居中元素的左侧或右侧浮动元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！