垂直对齐圆形列表元素超链接答案

【问题标题】：Vertically aligning a round list element hyperlink垂直对齐圆形列表元素超链接
【发布时间】：2018-03-12 03:21:03
【问题描述】：

我有一个带有 2 个 div 的标题，第一个（浮动到左侧）是一个简单的水平无序水平列表，它垂直居中正确（标题的行高与其高度相同，并且垂直对齐：中间)。第二个 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/ 如何垂直对齐圆形列表元素？我宁愿远离任何弹性盒等。

【问题讨论】：

标签： css list alignment vertical-alignment

【解决方案1】：

如果您不想使用 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;
}

【讨论】：

【解决方案2】：

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

【讨论】：

它实际上是 7.5px，这不是唯一的选择。您可以设置：#header #icons ul {padding-top: 7.5px} 以获得相同的结果。
是的，我知道，我的意思是说没有填充或边距就没有其他选择。