2

我试图在一个内联块内垂直居中一个 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/

编辑：
这是我想要的：
在此处输入图像描述

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

4

3 回答 3

4

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

1.添加一个display:table-row;到父块。

2.删除所有浮动并替换为display:table-cell;

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

这是工作演示

的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;}

希望这可以帮助。

于 2013-06-06T09:55:48.980 回答
1

你可以尝试这样的事情：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>
于 2013-06-06T09:52:09.677 回答
0

您可以尝试添加以下内容：

margin-top: 13%;在.block_textCSS 中的选择器处。

于 2013-06-06T09:55:57.230 回答