Html 如何使用垂直对齐：中间对齐；在我的代码中正确使用（或者在不使用position:absolute的情况下找到更好的解决方案）

这是我的代码：

<div class="container"> 
            <div class="text floatLeft">
                <h1> <span class="babyblue">App Store</span> Optimization</h1>
                <p>Over 60% of all app downloads come from search and the average app barel scratches the surface of this explosive channek. Can your app be found? </p>
            </div>
            <img src="http://example.com/wp-content/themes/twentyfifteen/images/OPTIMIZATION.png" class="floatRight">
        </div>

JSFIDLE 我在这里更新您的CSS：

同时检查：

这可能是一个解决方案

.cf：之前， .cf：之后{ 内容：； 显示：表格； } .cf：之后{ 明确：两者皆有； } .左{ 浮动：左； } .对{ 浮动：对； } .集装箱{ 位置：相对位置； 显示：表格； } .文本{ 显示：表格单元格； 背景：黄色； 垂直对齐：中间对齐； } 应用商店优化 超过60%的应用程序下载来自搜索，平均而言，巴雷尔的应用程序触及了这一爆炸性通道的表面。可以找到你的应用程序吗

.文本{ 显示：表格单元格； 文本对齐：居中； 垂直对齐：中间对齐； 边框：1px000； } .text img{ 宽度：200px； 显示：内联块； 高度：200px； } .集装箱{ 垂直对齐：中间对齐； 宽度：100%； 显示：表格； } 应用商店优化 超过60%的应用程序下载来自搜索，平均而言，巴雷尔的应用程序触及了这一爆炸性通道的表面。可以找到你的应用程序吗

---

更新了它，在我的css中不太复杂。这是一个简单的标准示例。我看到它可以工作，但出于某种原因它不能在我的代码中工作。我认为这是.text中的相对部分-你知道为什么吗？你没有给出父容器的高度。检查一下它的高度，我做了，但它没有居中。高度是“%”而不是px。哦，对不起，我忘了我没有标记它。我不使用高度，因为它可以灵活。我使用wordpress，这样人们可以编辑文本，它可以有很多内容，也可以有少量内容。。所以它必须是灵活的。在此分区中，我不能使用高度。顺便说一句，感谢您的关注：Dhey@Hatul您不能使用没有任何高度的vertival align。请现在查看您需要清除修复容器并删除浮动。文本元素。看起来非常好，唯一的一点是，我没有理由就有一个边距，尽管边距=0。当文本div变小时，边距减小。我怎样才能解决这个问题？检查的样式可能在%I中有一些宽度或边距，我刚刚添加了一个新类，带有float:right，仅适用于图像。非常感谢。你帮了我很多！

.part2 {
width: 100%;
height: 100%;
background-color: #fff;
position: relative;
padding-top: 15%;
display: table;
}

.part2 .container {
width: 70%;
margin: 0 auto;
/* height: 40%; */
display: table;
margin-bottom: 7vh;
}

.part2 .text {
}

.text {
    position:relative;
    top:50%;
}

.container{
    clear:both;
    height:900px;
}