CSS

Question

// My HTML CODE HERE
<div id="main">
    <div id="wrap">
        <div class="header">
            <span class="img_frame">
                <img src="http://phone.pe.hu/main_logo_white.png">
            </span>
        </div>
    </div>
</div>

// My css CODE HERE
#wrap .header {
    position:relative;
    background-color: rgba(35, 81, 112, 0.9);
    opacity: 0.8;
    width:598px;
    height:72px;
    float:left;
    text-align: center;
    display: block;    
}

#wrap .header .img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

#wrap .header .img_frame img {
    display: inline-block;
    width: 182px;
    vertical-align: middle;
}

我尝试将img标记对齐到跨框中的中间位置，这是在内联块显示中定义的，但它不起作用。（这种方法是指这个答案：How to vertically align an image inside div）

结果可以在这里看到： https://jsfiddle.net/MaggiePhalk/Lmn8jaLe/2/

应该纠正什么？ PLZ。

Answer 1

您可以使用CSS显示属性table和table-cell垂直对齐，margin: 0 auto可以使图像居中。

CSS

#wrap .header {
    position:relative;
    background-color: rgba(35, 81, 112, 0.9);
    opacity: 0.8;
    width:598px;
    height:72px;
    float:left;
    text-align: center;
    display: table;
}
#wrap .header .img_frame {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}
#wrap .header .img_frame img {
    display: table-cell;
    width: 182px;
    vertical-align: middle;
    margin:0 auto;
}

Working JSFiddle

更多信息：CSS Vertical Aligning

Answer 2

此代码使用问题中引用的方法

JSFiddle

以下是代码：

<div id="main">     
    <div id="wrap">
        <div class="header">
            <span class="img_frame"></span>
                <img src="http://phone.pe.hu/main_logo_white.png" height="30px"/>
        </div>
    </div>
</div>

#wrap .header {
    position:relative;
    background:transparent url('backgrounds/header7_814_opacity40.png') no-repeat;
    background-color: rgba(35, 81, 112, 0.9);
    opacity: 0.8;
    width:598px;
    height:72px;
    text-align: center;
    display: block;    
}

.img_frame {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
img{
    vertical-align: middle;
    max-height: 72px;
    max-width: 598;
}

css img vertical-align to middle不起作用。怎么了？

2 个答案:

CSS