如何在其旁边的其他文本的链接居中？

我在页面底部分页，我想保持“第1页，共2页”为中心，只需将“较旧”和“较新”按钮包裹到它，即使只有一个两个按钮存在。如何在其旁边的其他文本的链接居中？

这是我目前有：

.wrapper { 
 
    background-color: #aaa; 
 
    width: 540px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.links {} .page {}

<div class="wrapper"> 
 
    <a href="#" class="links">Older</a> 
 
    <span class="page">Page 1 of 2</span> 
 
</div>

如何保持“1 2”的中心在div，只是把“老”或“更新”链接相邻在span的左侧或右侧？

来源

2015-09-17 nicholas79171

的一种方式个

.wrapper { 
    background-color: #aaa; 
    width: 100%; 
    margin: 0 auto; 
} 
.items { 
    position: relative; 
    text-align: center; 
} 
.item { 
    margin: 0 5px; 
} 
.always-left, .always-right { 
    position: absolute; 
    top: 0; 
} 

.always-left { 
    left: 0; 
} 

.always-right { 
    right: 0; 
}

<div class="wrapper items"> 
    <a class="item always-left" href="#">Older</a> 
    <div class="item">Page 1 of 2</div> 
    <a class="item always-right" href="#">Older</a> 
</div>

来源

2015-09-17 00:41:08 LorenzoD

如果只有一个按钮，即“较旧”或“较新”，则这不起作用。 – nicholas79171

你是对的，我修好了;） – LorenzoD

这真是太棒了，它实际上是我一起去的那个，因为另一个没有按照div的宽度居中，而是两个词之间的空间。非常感谢！ – nicholas79171

.wrapper { 
 
    width: 540px; 
 
    background: #CCC; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
.links { 
 
    float: left; 
 
} 
 
.newer { 
 
    float: right; 
 
}

<div class="wrapper"> 
 
    <a href="#" class="links older">Older</a> 
 
    <span class="page">Page 1 of 2</span> 
 
    <a href="#" class="links newer">Newer</a> 
 
</div>

为了有联系坚守（右），你需要删除从正常流量中的链接，使用浮动的左边。

View it here。

CSS

.links{ 
    float:left; 
} 
.newer{ 
    float:right; 
}

HTML

<div class="wrapper"> 
    <a href="#" class="links older">Older</a> 
    <span class="page">Page 1 of 2</span> 
    <a href="#" class="links newer">Newer</a> 
</div>

来源

2015-09-17 00:39:28 pixeline

谢谢，我想这是一些简单的类似。这也将允许我通过缩小“div”的大小来将“较旧”和“较新”链接放在一起，如果需要的话。在我看来，这也是最干净的方式。 – nicholas79171

一个小问题，就是将文本集中在较老的“r”和较新的“n”之间的区域中。将“老年人”改为“老年人”，你会看到我在说什么。当两者都存在时，这对于较小的字体大小并不明显，但是我想保持这种居中，而不管左侧或右侧是什么。 – nicholas79171

这里做

.wrapper { 
 
    background-color: #aaa; 
 
    width: 540px; 
 
    position: relative; 
 
} 
 
.links { 
 
    position: absolute; 
 
    /* half width of the container - width of "Page 1 of 2" - 10px margin */ 
 
    left: calc(50% - 73px - 10px); 
 
} 
 
.page { 
 
    display: table; 
 
    margin: auto; 
 
}

<div class="wrapper"> 
 
    <a href="#" class="links">Older</a> 
 
    <span class="page">Page 1 of 2</span> 
 
</div>

来源

2015-09-17 00:40:48 akinuri

如何在其旁边的其他文本的链接居中？

回答

相关问题