Вертикальное выравнивание фиксированной ширины/высоты DIV внутри переменной высоты DIV

Question

Пожалуйста, обратите внимание на этот Fiddle: https://jsfiddle.net/cu1tpbe3/12/

Как вертикальной Align класс .close_button в центре переменной класса высоты .container?

код 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

Удалить Float: левый и добавить вертикальную Выровнять по середине и поместите тесную оболочку после текста обертки

Код HTML

<div class="container"> 


<div class="the_text"> your content</div> 
    <div class="close_button"><img src="http://s8.postimg.org/eq14wxj4x/inchide.png" alt="Close" class="the_image" /></div> 

</div> 

CSS код

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

.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; 
vertical-align:middle 

} 

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

Answer 2

demo

HTML

<div class="container"> 



<div class="the_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet sed ligula nec vulputate. Ut a libero lorem. Duis pharetra ornare imperdiet. Fusce in dignissim lectus, eget facilisis nisl. Aenean ornare euismod lacus, eu vehicula nisi dignissim ac. Morbi neque orci, fringilla sit amet vulputate eget, semper nec enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras et faucibus velit. Nullam vel vestibulum massa. Duis fermentum leo ligula, nec accumsan tellus venenatis ut. Nunc sollicitudin lectus quis justo auctor, vitae finibus dui feugiat. Nam nec elit ac dolor semper accumsan. Morbi rutrum imperdiet egestas. Nullam euismod consequat nunc quis sollicitudin. Sed at lacinia magna, non luctus massa.</div> 
    <div class="close_button"><img src="http://s8.postimg.org/eq14wxj4x/inchide.png" alt="Close" class="the_image" /></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; 
vertical-align: middle; 
} 

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

Answer 3

Лучше всего было бы установить его позицию: абсолютная; внутри содержащий DIV, например ...

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

Answer 4

Вы можете использовать позицию абсолютного и перевести:

.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 { 
 
    z-index: 2; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50%; 
 
    -moz-transform: translate(0, -50%); 
 
    -ms-transform: translate(0, -50%); 
 
    -webkit-transform: translate(0, -50%); 
 
    transform: translate(0, -50%); 
 
    background-color: green; 
 
} 
 

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

<div class="container"> 
 
    
 
<div class="close_button"><img src="http://s8.postimg.org/eq14wxj4x/inchide.png" alt="Close" class="the_image" /></div> 
 
    
 
<div class="the_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas aliquet sed ligula nec vulputate. Ut a libero lorem. Duis pharetra ornare imperdiet. Fusce in dignissim lectus, eget facilisis nisl. Aenean ornare euismod lacus, eu vehicula nisi dignissim ac. Morbi neque orci, fringilla sit amet vulputate eget, semper nec enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras et faucibus velit. Nullam vel vestibulum massa. Duis fermentum leo ligula, nec accumsan tellus venenatis ut. Nunc sollicitudin lectus quis justo auctor, vitae finibus dui feugiat. Nam nec elit ac dolor semper accumsan. Morbi rutrum imperdiet egestas. Nullam euismod consequat nunc quis sollicitudin. Sed at lacinia magna, non luctus massa.</div> 
 

 
</div>