Question

请看一下小提琴：https://jsfiddle.net/cu1tpbe3/12/

如何在变量高度等级.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

你最好的选择是设定它的位置：绝对;在包含div的内部，例如......

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

Answer 2

删除浮动：向左并添加垂直对齐中间并将文本包装器

放置在封闭包装后面

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 3

您可以使用绝对位置和翻译：

$response = $facebook->get('/me? access_token='.$accessToken);

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

Answer 4

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

垂直对齐固定宽度/高度div在可变高度div内

4 个答案: