我一直在尝试让“标题”文本居中并保留图标。
text-align: center;
对我不起作用。
谁能引导我朝着正确的方向前进?
谢谢。
IMG:
.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
}
.header a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 32px;
vertical-align: middle;
}
#hamburger {
color: white;
font-size: 32px;
}
.menu {
display: inline-block;
}
<div class="headerwrapper">
<div class="header">
<div class="menuWrap">
<div class="menu open">
<span id="hamburger" class="fas fa-bars hvr-grow"></span>
</div>
<a href="index.php">Header</a>
</div>
</div>
</div>
最佳答案
您应该将 text-align:center 放入您的 .header
类中。
除此之外,您还应该将 float:left;
属性放在 .menu
类中。
例子如下:
.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
text-align:center;
}
.header a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 32px;
vertical-align: middle;
}
#hamburger {
color: white;
font-size: 32px;
}
.menu {
display: inline-block;
float:left;
}
<div class="headerwrapper">
<div class="header">
<div class="menuWrap">
<div class="menu open">
<span id="hamburger" class="fas fa-bars hvr-grow">a</span>
</div>
<a href="index.php">Header</a>
</div>
</div>
</div>
关于html - 文本不会在标题中居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49900561/