垂直对齐圆形列表元素超链接
[英]Vertically aligning a round list element hyperlink
问题描述
我有一个2格的标头，第一个（向左浮动）是一个简单的水平无序水平列表，该列表正确地垂直居中（标头的行高与它的高度相同，并且vertical-align：中）。 第二个div浮动在右侧，并且还有一个水平的无序列表，但是它具有圆形（边界半径：50％）超链接，并且它们中根本没有文本（它们将用作图标，带有背景） -图片）。 尽管第一个div正确对齐（无论标题的大小如何），第二个div仍位于顶部。
我的代码：
#header
{
background-color: #a3a3a3;
color: black;
height: 50px;
line-height: 50px;
vertical-align: middle;
}
#header #icons
{
float: right;
}
#header #icons ul
{
margin: 0;
padding: 0;
}
#header #icons ul li
{
list-style-type: none;
display: inline-block;
float: right;
}
#header #icons ul li a
{
display: inline-block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
}
您可以在此处查看代码和结果： https : //jsfiddle.net/mf6yg78f/如何才能垂直对齐圆形列表元素？ 我希望远离任何flexbox等。
2 个解决方案
解决方案1
0 2017-09-30 11:14:09
给margin-top: 7px; 到#header #icons 。 没有其他选择。
body { margin: 0; padding: 0; background-color: black; } #wrapper { width: 80%; background-color: white; margin: auto; } #header { background-color: #a3a3a3; color: black; height: 50px; line-height: 50px; vertical-align: middle; } #header #links { float: left; } #header #links ul { margin: 0; padding: 0; } #header #links ul li { list-style-type: none; display: inline-block; } #header #links li:before { content: " | "; } #header #links li:first-child:before { content: none; } #header #links ul li a { text-decoration: none; color: inherit; } #header #links ul li a:hover { color: red; } #header #icons { float: right; margin-top: 7px; } /* icons on the right side, should also be centered vertically */ #header #icons ul { margin: 0; padding: 0; } #header #icons ul li { list-style-type: none; display: inline-block; float: right; } #header #icons ul li:first-child ~ li { margin-right: 10px; } #header #icons ul li a { display: inline-block; text-decoration: none; width: 35px; height: 35px; border-radius: 50%; background-color: #787878; }
<body> <div id="wrapper"> <div id="header"> <div id="links"> <ul> <li><a href="#">Index</a></li> <li><a href="#">Login</a></li> <li><a href="#">Gallery</a></li> </ul> </div> <div id="icons"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> </div> </div> </body>
解决方案2
0 2017-09-30 18:12:30
如果您不想使用flex，请尝试将项目显示为表格和表格单元格，以使其表现为表格。 display:table-cell将使该元素表现为<td> ，因此您可以在其中有效地添加vertical-align: middle
尝试将以下样式更改为：
/* icons on the right side, should also be centered vertically */
#header #icons ul
{
margin: 0;
padding: 0;
height: 50px;
display: table;
float: right;
}
#header #icons li
{
list-style-type: none;
display: table-cell;
text-align: right;
vertical-align: middle;
width: 35px;
padding-right: 10px;
}
#header #icons ul li a
{
display: block;
text-decoration: none;
width: 35px;
height: 35px;
border-radius: 50%;
background-color: #787878;
margin: auto 0;
float: right;
}
垂直对齐一个元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.