html - HTML：将跨度文本水平对齐到图像

Question

我正在尝试将跨度文本与图像水平对齐：

<div >
      <img src="c:\work\img\logo3.jpg" width="80" height="80" />
      <span><ul>YAD<li>HIM</li></ul></span>
    </div>

插入文字的原因<ul>是实现换行。

更多参考：http: //jsfiddle.net/himanshuy/4LKhX/

Answer 1

要使它们居中对齐，请添加text-align: center;和div.box删除margin-leftfrom span。也添加display: block;到span，然后你可以摆脱<ul>YAD<li>HIM</li></ul>混乱。

小提琴：http: //jsfiddle.net/W6ATN/

Answer 2

试试这个：http: //jsfiddle.net/W6ATN/8/

div.box {
  background-color: #000000;
  color: #FFFFFF;
  width: 300px;
  height: 400px;
  text-align: center;
}
span {
  //margin-left: 10%;
  font-size: 30px;
  color: red;
  clear:both;
  display: block;
}
#mymessage{
       padding-top: 50%;
}