Question

我正试图在内联块内垂直居中一个div，我使用这个内联块来自动获取孩子的大小，以便使我的div居中。

问题是我的孩子div浮动......为了将它限制在左/右位置。

以下是HTML的外观：

<span class="block_container">
    <div class="block_text"> <!-- float:right -->
        <h1>TITLE</h1>
        <p>lorem ipsum</p>
    </div>
    <div class="block_image"> <!-- float:left -->
        <img src="test.png"></img>
    </div>
</span>

但是，我无法弄清楚这个问题：http://jsfiddle.net/kl94/nH2sd/

编辑：
这就是我想要的：
enter image description here

这是我尝试过的： http://jsfiddle.net/kl94/nH2sd/

Answer 1

要使实际的垂直对齐按照您希望的方式按照所附的屏幕截图工作，您必须更改一些内容。

<强> 1。将 display:table-row; 添加到父块。

<强> 2。删除所有浮动并将其替换为 display:table-cell;

这将强制vertical-alignment的确切特征共存，并按照所附的屏幕截图以您希望的方式工作。

以下是WORKING DEMO

HTML：

<span class="block_container">
        <div class="block_image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"></img>
    </div>
    <div class="block_text">
        <div class="bgColor">
        <h1>TITLE</h1>
        <p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
            <div>
    </div>
</span>

CSS：

.block_text {
    /*background: red;*/
    /*float: right;*/
    width: 60%;
    display:table-cell;
    vertical-align:middle;
}

.block_image {
    background: yellow;
    /*float: left;*/
    width: 40%;
    display:table-cell;
}

.block_image img {
    width: 100%;
    max-width: 300px;
    height:auto;
}

.block_container {
    background:teal;
    /*display:inline-block;*/
    display:table-row;
}
.bgColor{background:red;}

希望这有帮助。

Answer 2

你可以尝试这样的事情：http://codepen.io/pageaffairs/pen/LlEvs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.block_text {
    background: red;
    display:inline-block;
    vertical-align: middle;
}

img {
    width: 40%;
    max-width: 300px;
    vertical-align:middle;
    background: yellow;
}

.block_container {
    background:teal;
    display: inline-block;
}


</style>
</head>
<body>

<div class="block_container">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Gnu_meditate_levitate.png"><div class="block_text">
        <h1>TITLE</h1>
        <p>I should be align vertically but the problem is i don't know my left neightbor height...</p>
    </div>
</div>

</body>
</html>

Answer 3

您可以尝试添加此内容：

CSS中的margin-top: 13%;选择器

.block_text。

如何在一个内联块内垂直居中浮动div？

3 个答案: