这是我的代码
.header {
width: 100%;
height: 100px;
background: black;
}
.header .headerContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}<div class="header">
<div class="headerContainer">
<img src="https://cdn.worldvectorlogo.com/logos/react.svg" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>但是，这并没有正确对齐元素。
我应该如何修改我的 CSS 以便headerContainer正确对齐？
您可以使用 flexbox 来解决这个问题：
.header {
background: black;
height: 100px;
width: 100%;
}
.header .headerContainer {
align-items: center;
display: flex;
height: inherit;
}
img#logo {
height: 75%;
}
p#logotext {
color: white;
display: inline
}<div class="header">
<div class="headerContainer">
<img src="https://placehold.it/50x50" alt="Logo" id="logo" />
<p id="logotext">Welcome To Here</p>
</div>
</div>所以你不需要使用position或tranform垂直居中项目。如果你想了解更多关于 flexbox 的信息，我推荐这个站点来快速浏览/参考。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句