Question

我有以下html：

<div class="toolbar">
    <span>My title</span>
    <a href="#">User Name</a>
    <a href="#">
      <img src="http://image.flaticon.com/icons/png/128/56/56805.png" />
    </a> 
 </div>

我使用弹性框使两个链接对齐，“我的标题”文本填充剩余空间，如下例所示：https://jsfiddle.net/tz472j3o/

我现在需要的是在工具栏中垂直居中显示文本和图像链接。我知道我可以用align-items: center做到这一点，但是这对我不起作用，因为我需要在鼠标悬停时更改链接的背景颜色，所以我需要链接高度来获取工具栏中的所有垂直空间。

所以，我需要的是一个垂直拉伸的元素，以获取所有可用空间，但将文本垂直居中放置在其中。

Answer 1

制作链接 display:flex和align-items:center。

.toolbar {
  background-color: lightblue;
  height: 40px;
  display: flex;
}
span {
  flex-grow: 1;
  align-self: center;
}
a {
  margin-left: 5px;
  display: flex;
  align-items: center;
}
a:hover {
  background-color: white;
}
img {
  width: 20px;
}

<div class="toolbar">
  <span>My title</span>
  <a href="#">User Name</a>
  <a href="#">
    <img src="http://image.flaticon.com/icons/png/128/56/56805.png" />
  </a>
</div>

Answer 2

对vertical-align:middle中的img使用a：

.toolbar a img
{
  vertical-align:middle;
}

居中对齐flex行中元素内的文本

2 个答案: