DIV 中的居中图像

【问题标题】：Centred Image in DIVDIV 中的居中图像
【发布时间】：2013-12-03 05:25:00
【问题描述】：

CSS：

overlay { 
  height: 100%; 
  width: 100%; 
  position: absolute; 
  top: 0px; 
  left: 0px; 
  z-index: 99999; 
  background-color:black; 
  filter: alpha(opacity=75); 
  -moz-opacity: 0.75; 
  opacity: 0.75; 
}
overlay h2 { 
  position: fixed; 
  margin-left: 40%; 
  top: 40%; 
  font-size: 1.75em; 
  font-weight:700; 
  color:#EF9C00;
}

HTML：

<div id="overlay"><h2>Loading.. Please wait</h2></div>

我想要一个 loader.png 直接出现在下一行居中的单词下方。我尝试的一切似乎都将图像放在文本上方或右侧！

谢谢

【问题讨论】：

标签： image html center

【解决方案1】：

右图加载：

<div id="overlay"><h2>Loading.. Please wait <img src="http://jimpunk.net/Loading/wp-content/uploads/loading23.gif" /></h2></div>

添加这个css

#overlay  img {
  vertical-align:middle;
}

下一行居中的img加载：

<div id="overlay">
  <h2>
    Loading.. Please wait <br /><img src="http://jimpunk.net/Loading/wp-     content/uploads/loading23.gif" />
  </h2>
</div>

添加这个 css

#overlay h2 { 
      text-align:center;
}

【讨论】：