Question

我看到了一个类似的帖子here，但我注意到没有人回答，当我按下jsfiddle时，它并没有居中。

我有这个当前的代码，我想要完成的是将图像直接放在div中的垂直中间。我尝试过纵向对齐并将其放入span和top％但似乎没有任何效果。我也使用Chrome，所以我不知道这是否重要。 http://jsfiddle.net/y84mx/

    <div class="hours">
    <div id="sun">
        <img src="http://jsfiddle.net/img/logo.png" alt="Opening" height="auto" width="20%" align="left" vertical-align="middle" />
        <span>Hours</span>
    </div>
    </div>

谢谢！

Answer 1

您可以使用：

#sun {
    position:relative;
}

img {
    background: #3A6F9A;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
}

<强> Updated Fiddle

Answer 2

对于两个项目集display: inline-block;
然后确保匹配line-height图像高度的<span>。

Answer 3

的 Demo

HTML

<div id="hours"> <span id="sun"> <img src="http://jsfiddle.net/img/logo.png" alt="twibuffer" /> </span> <span> Hours</span> </div>

CSS

#hours { margin-bottom:2%; text-align: center; } #hours span { display: inline-block; vertical-align: middle; } #hours #sun { border: 1px solid red; /* to show the centering */ }

Answer 4

我已更新fiddle，请检查

#sun{
 line-height : auto;
 border: 1px solid;
 text-align : center;  
}

.hours{
padding-left: 2%;
padding-right: 2%;
text-align: right;
color: #000;
font-size: 40px;
}

img {
  background: #3A6F9A;
}

Answer 5

看看这个 http://jsfiddle.net/chetangawai/y84mx/9/

#sun{
  text-align:center;
    display:inline-block;
    border:solid
}

.hours{
    color: #000;
    font-size: 40px;
    padding-left: 2%;
    padding-right: 2%;

}

img {
     background: #3A6F9A;
}

将文本与div内的图像垂直对齐

5 个答案: