您好,在下面的代码徽标中,文字未显示。当我将样式添加到vertical-align:center.I想要图像和文本时,我应该居中
任何人帮助我
.logo{
display:inline-block;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}

<div class="logo">
<a href="index.html"><img src="images/logo_sml.jpg"></a>
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>
&#13;
答案 0 :(得分:0)
像这样更新日志类:
.logo{
text-align: center;
display:inline-block;
width:100%;
}
答案 1 :(得分:0)
对于水平对齐更改inset
样式:
logo
和HTML:
.logo {
display: block;
text-align: center;
}
答案 2 :(得分:0)
.logo
div放在中心元素中,如下所示:<center><div class="logo">...</div></center>
。答案 3 :(得分:0)
修改
.logo{
text-align: center;
display:inline-block;
width:100%;
}
.logo a {
font-size: 3em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #fff;
font-family: "Roboto Slab", serif;
padding-left: 50%;
}
.logo a img{
vertical-align:middle;
}
.logo p {
color: #000;
text-transform: uppercase;
font-size: 1.2em;
margin-top: -10px;
display:inline-block;
}
<div class="logo">
<a href="index.html"><img src="images/logo_sml.jpg"></a>
<p>Newton Public School<br>
Kanaka Nagar-Rt Nagar<br>
Reach Out, Reach High, Reach Beyond</p>
</div>