图像和文本不在html中显示中心

时间:2015-06-11 11:39:07

标签: html css

您好,在下面的代码徽标中,文字未显示。当我将样式添加到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;
&#13;
&#13;

4 个答案:

答案 0 :(得分:0)

像这样更新日志类:

  .logo{
       text-align: center;
       display:inline-block;
       width:100%;
  }

答案 1 :(得分:0)

对于水平对齐更改inset样式:

logo

和HTML:

.logo {
  display: block;
  text-align: center;
}

答案 2 :(得分:0)

  • 如果您想将div 仅水平居中>,只需将.logo div放在中心元素中,如下所示:<center><div class="logo">...</div></center>
  • 如果您想要横向和纵向将两者居中,请尝试this answer一个非常古老的问题。

答案 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>