Question

这似乎应该更加简单，但是我已经尝试过查看以前类似问题的其他一些答案，而且还没有设法到达任何地方。

我一直在尝试使用CSS来获取我的徽标和内联块无序列表，以便在我的标题中垂直浮动。

在我试过的徽标上

vertical-align: middle;

没有做任何事情，我也尝试过：

top: 50%;
transform: translateY(-50%);
-webkit-transform: translateX(-50%);

将两个项目都发送到标题的最顶部，离屏幕一半。

我也在无序列表上尝试了第二条规则，这使得两个项目都移动到了屏幕左侧。

真的不确定发生了什么，但我希望找到一个解决方案，这意味着如果我调整标题的高度，它们将保持垂直居中，因为我将使用此模板/ wordpress主题在未来的其他网站，它将使我的生活更轻松。

我的CSS是：

.header {
width: 75%;
height: 100px;
margin: 0 auto; 
}

img.standard.logo { 
position: relative;
float: left;
height: 40px;
width: 360px; 
}

.header nav ul{
display:block;
float:right;
padding:0;
margin-top:12px;
margin-bottom:0px;
list-style:none; 
}

Answer 1

简单的解决方案是通过margin-top推送它：

img.standard.logo {
   margin-top: 30px;
}

Answer 2

有很多方法可以做到这一点：

如果您的徽标图片和标题将继续具有修正高度，您只需添加一个margin-top即可将其固定在中心位置。

我喜欢在需要垂直居中时使用它：

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Flexbox的

有很多不同的解决方案。使用最适合您和您的同事的那个。

我无法将徽标垂直放在标题中

2 个答案: