垂直對齊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（）修復它的位置。它的缺點是它並不總是與古代瀏覽器兼容。