html - float 元素的中心未知

Question

我正在创建模块化图 block ，这些图 block 需要在图 block 内垂直居中的文本右侧放置图形。

我似乎无法让居中的图形表现出来。这是我目前所拥有的...

HTML

<div class="row">
<!--Tile 1-->
<div class="four columns">
    <div class="tile round-border">
        <div class="row container clearfix">
            <div class="nine columns">
                <h2>Headline</h2>
                <p class="body-copy">Body Text</p>
                <a href="#">Action</a>
            </div>
            <div class="three columns absolute-center">
                <div>IMAGE</div>
            </div>
        </div>
    </div>
</div>
</div>

CSS

.absolute-center{
    display: inline-block!important;
    text-align: center;
}

.absolute-center>div{
    display: table-cell;
    vertical-align: middle;
}

Answer 1

为此，您必须确保两列的高度相同。如果您不在其上使用列会更容易，因为您将无法在 float 元素上执行此操作。

问题是您无法确定容器的高度。这在 CSS 中不是一件容易的事。

这里有一个方法可以做到这一点

.tile {
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    position: relative;
}

.tile__content {
    margin-right: 45px; /* width of your image */
}

.tile__image {
    position: absolute;
    right: 20px;
    top: 20px;
    bottom: 20px;
}

.tile__image img, .strut {
    display: inline-block;
    vertical-align: middle;
}

.strut {
    height: 100%;
}

<div class="tile round-border">
    <div class="tile__content">
        <h1>Test</h1>
        More height !<br />
        Pliz !
    </div>
    <div class="tile__image">
        <div class="strut"></div><!--
        --><img src="https://cdn4.iconfinder.com/data/icons/CornerStone/PNG/download%20off.png" alt="" />
    </div>
</div>

完全自适应宽度和高度。