块元素的垂直对齐答案

【问题标题】：vertical alignment of block element块元素的垂直对齐
【发布时间】：2016-07-04 23:44:10
【问题描述】：

如何垂直对齐已经与 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;
 }

【问题讨论】：

更新了我的答案，展示了如何使用块元素，但建议使用内联版本

标签： html css

【解决方案1】：

这可以使用图像的 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>

请在此处查看Working fiddle

【讨论】：

【解决方案2】：

我们开始吧……只要让图像成为图像（内联）并将其添加到您的.myContainer

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

示例 sn-p

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

如果你还需要一些block行为，你可以在图片中添加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>

【讨论】：

【解决方案3】：

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

【讨论】：

OP表示不能使用top: 50%或transform: translate(-50%, -50%);
由于某种奇怪的原因，垂直对齐在我的网站上不起作用-但在小提琴中起作用：/ jsfiddle.net/3mLsL9t5/4