css - 如何将图像置于正中间的 div 中

Question

我试图将图像置于 div 中的正中间 - 水平和垂直，但这对我不起作用:

#col_as_table
{
    float:left;
    position:relative;
    width:14%;
    min-height:100px;
    height:auto;
    display: table;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

HTML

<div id="col_as_table"><img src="test.png"></div>

Answer 1

试一试。你需要一个额外的 div。

Fiddle!

HTML:

<div class="divTable">
    <div class="innerDivTable">
        <img src="test.png"/>
    </div>
</div>

CSS:

.divTable {
    width: 200px; /* purely for demonstration */
    height: 200px; /* purely for demonstration */
    display: table;
    border: 1px solid black;
}

.innerDivTable {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}