垂直对齐div

Question

我似乎无法同时获得图像和文本在主div内垂直对齐。

https://jsfiddle.net/jf2dgh0j/

.image { 
width:50%; 
height:auto; 
float:right; 
vertical-align:middle; } 

Answer 1

我不知道为什么你对父div的顶部200像素填充，但以下可能是你想达到什么目的。

将display: table-cell应用于.description-wrap和.image子元素。

.work-subwrap { 
 
    width:70%; 
 
    background-color:#C87778; 
 
    margin:0 auto; 
 
    margin-top:30px; 
 
    display:table; 
 
} 
 
.description-wrap, .image { 
 
    display: table-cell; 
 
    width: 50%; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 
.description-wrap a { 
 
    display: inline-block; 
 
    padding: 10px; 
 
    background-color: white; 
 
} 
 
.image img { 
 
    width:100%; 
 
    vertical-align: top; 
 
}

<div class="work-subwrap"> 
 
    <div class="description-wrap"> \t <a class="project-link" href="#modal1">Maru</a></div> 
 
    <div class="image"> 
 
     <img alt="" id="first" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQdiIK0bVvSbRnegxQPMS6V0nBHFT40j6P6OH-C11pmooy6Duad"> 
 
    </div> 
 
</div>

Answer 2

有些人抗台，但跟你说实话，这正是表是。你的div只需要输入td即可。使用一个表，而不是下面的div修改小提琴：

https://jsfiddle.net/jjsx2t6e/

我觉得为垂直对齐的大多数事情，还真的表是你的朋友，让生活变得更轻松。

Answer 3

你有一点不同的造型方法混合的。如果您想使用display: table来对齐，请不要使用float或position: absolute。

我不是100％清楚你想达到什么样的，但下面的CSS垂直居中的文字和图片的div。如果你想让它们在父div中居中，你还需要调整填充。

.image { 
    width: 50%; 
    display: table-cell; 
    vertical-align: middle; 
} 
.description-wrap { 
    background-color: #fff; 
    display: table-cell; 
    vertical-align: middle 
} 

更新小提琴https://jsfiddle.net/jf2dgh0j/1/

Answer 4

我不能完全确定你的意思“同时获得的图像和文本到主分区内垂直对齐”的东西。我知道你希望文字和图像都是垂直居中的。

先来了表。 然后在表格中出现表格单元格。这应该具有父元素的100％宽度和100％高度。你设置了vertical-align：center;属性。表格单元格内的每个元素都将与显示内嵌块对齐。

.work-subwrap { 
    width:70%; 
    height:500px; 
    background-color:#C87778; 
    margin:0 auto; 
    margin-top:30px; 
    position:relative; 
    display:table; 
} 
.image { 
    display:table-cell; 
    width:100%; 
    height:auto; 
    vertical-align:middle; 
    text-align:center; 
} 
.description-wrap { 
    display:inline-block; 
    background-color:#fff; 
    position:absolute; 
    top:50%; 
    left:50%; 
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 

.image img {width:50%;} 

只要文本/链接没有固定的宽度/高度，我建议使用translate（）修复它的位置。它的缺点是它并不总是与古代浏览器兼容。