如何垂直對齊列表中的圖像

vertical-align一直給我過去的問題，再次遇到一個我不知道如何解決的問題。如何垂直對齊列表中的圖像

我有這個網站：

<ul id="council-slider"> 
    <li class="col-md-12" style="display: block"> 
    <img src="somesource" /> 
    <div class="council-spacer"></div> 
    <p>text content goes here</p> 
    </li> 
</ul>

CSS：

#council-slider { 
    margin: 0 auto; 
    list-style: none; 
    min-height: 300px; 
    max-height: 400px; 
} 

#council-slider li img { 
    float: left; 
    height: auto; 
    width: 25%; 
    margin: 5px; 
} 

.council-spacer { 
    height: 300px; 
    width: 100px; 
    float: left; 
} 

#council-slider li p { 
    margin-top: 100px; 
}

我希望能夠垂直對齊圖像在中間。文本是多行包裝，所以在這種情況下使用line-height將不起作用。此外，圖像可以有不同的高度。

有多個列表項目;我在示例中只使用了一個來簡化和減少html。

來源

2015-09-10 Quiver

請發表您的CSS代碼了。 – divy3993

將HTML和CSS放入https://jsfiddle.net/甚至更好！ – Coops

@CodeBlend更糟 - 在依靠小提琴展示問題之前，您應該始終在問題中發佈代碼 – Adjit

您應該瞭解vertical-align屬性能夠應用的位置。

從MDN引用：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

的垂直對齊CSS屬性指定的直列或表小區盒的垂直對準。

因爲你的元素不被顯示爲要麼inline或table-cellvertical-align: middle;不會給你帶來任何好這裏。

你可以，但是，你的<div>樣式設置爲display: table-cell;然後vertical-align: middle

或者，這可以用CSS3實現的哈斯指出，只要確保你的用戶的瀏覽器支持CSS3

.valign-middle { 
    position: relative; 
    top: 50%; 
    Transform: translateY (-50%); 
}

這種工作方式 -

設置相對於父/容器的位置（即你的情況<li>）
將要垂直對齊的圖像，容器高度
的下降50％向上移動圖像50％的圖像

來源

2015-09-10 19:57:42 Adjit

沒有看到您的實際CSS代碼很難說，但你應該使用vertical-align: middle所有對象，你想對齊，你可能需要改變你的段落顯示display: table-cell。

來源

2015-09-10 19:50:09 kojow7

的高度的類添加到你的img如下。

.verticallyCenter { 
    position: relative; 
    top:50%; 
    Transform:translateY (-50%);}

參考This

來源

2015-09-10 19:57:43 harshitpthk

將利用Flexbox，就比較容易：display: flex;和

Demo

#council-slider { 
list-style: none; 
} 

#council-slider li{ 
    display: flex; 
    margin: 10px 0; 
    align-items: center; 
} 
.council-spacer { 
    width: 20px; 
}

來源

2015-09-10 20:11:44

如何垂直對齊列表中的圖像

回答

相關問題