塊元素的垂直對齊

Question

我如何垂直對齊已經與display：block對齊的圖像？ 左邊距：自動； 右邊距：自動；

注意，我不能使用top：50％left：50％transform：translate（-50％，-50％）或任何使用flex方法的顯示。

小提琴 ： https : //jsfiddle.net/3mLsL9t5/2/

CSS

.myContainer {
 width: 100px;
 height: 100px;
 background-color: lightblue;
 }

.myImage {
 width: auto;
 max-width: 20px;
 height: auto;
 max-height: 22px;
 border: 1px solid lightslategrey;
 position: relative;
 display: block;
 margin-left: auto;
 margin-right: auto;
 }

Answer 1

請嘗試下面的CSS

.myImage {
  border: 1px solid lightslategrey;
  display: block;
  height: 20px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  width: 20px;
}
.myContainer {
  background-color: lightblue;
  display: table-cell;
  height: 100px;
  position: relative;
  vertical-align: middle;
  width: 100px;
}

Answer 2

我們開始...只需將圖像作為圖像（內聯）並將其添加到您的.myContainer

display: table-cell;
text-align: center;
vertical-align: middle;

樣本片段

 .myContainer { width: 100px; height: 100px; background-color: lightblue; display: table-cell; text-align: center; vertical-align: middle; } .myImage { width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; } 

 <div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div> 

---

更新

或者您可以使用line-height

 .myContainer { width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 111px; } .myImage { width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; } 

 <div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div> 

如果仍然需要某些阻止行為，則可以添加display: inline-block; 圖片

---

更新2

當您詢問塊元素時，我也添加了一個顯示該元素的版本。

 .myContainer { width: 100px; height: 100px; background-color: lightblue; display: table-cell; vertical-align: middle; } .myImage { display: block; margin: 0 auto; width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; } 

 <div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div> 

Answer 3

使用圖像的CSS可以輕松實現：

position: absolute,
left:0,
right:0,
top:0,
bottom:0,
margin:auto

和position:relative對於容器。

 .myContainer { width: 100px; height: 100px; background-color: lightblue; position: relative; } .myImage { width: auto; max-width: 20px; height: auto; max-height: 22px; border: 1px solid lightslategrey; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 

 <div class='myContainer'> <img class='myImage' src='https://media-mediatemple.netdna-ssl.com/wp-content/themes/smashing-magazine/assets/images/sidebar-smashingconf-oxford.png'> </div> 

請在這里檢查工作小提琴