html - 垂直对齐可变高度 div 内的固定宽度/高度 div

Question

请看一下这个Fiddle:https://jsfiddle.net/cu1tpbe3/12/

如何在可变高度类 .container 的中心垂直对齐类 .close_button ？

Html 看起来像这样:

<div class="container">
<div class="close_button"><img src="http://www.example.com/image.png" alt="Close" class="the_image" /></div>
<div class="the_text">Some Text</div>
</div>

CSS:

.container {
position : relative;
width : 100%;
height : auto;
background-color: yellow;
}

.the_text {
display: table-cell;
position : relative;
padding : 0.5em 5.2% 0.5em 5.2%;
line-height : normal;
font-size : medium;
color : white;
text-align : left;
background-color: blue;
}

.close_button {
display: table-cell;
background-color: green;
float : right;
}

.the_image {
width : 30px;
height : 30px;
}

Answer 1

最好的办法是将其设置为 position:absolute;在包含的 div 中，例如...

.close_button {
    position:absolute;
    top:48%;
    right:0;
}