Question

我正试图为Twitch TV制作自定义关注者提醒。而且我试图将一个小图像置于div中。到目前为止，我已经成功地将其置于中心位置，但无论我尝试什么，它都不会垂直居中。我不知道为什么，我已经尝试过阅读有关stackoverflow的许多其他问题，以及遵循W3schools的指南，但我认为这对我的代码来说更具体。这是一个fiddle。（你无法看到图像，但你可以看到图像的位置）

这是代码;我的想法是图像在水平和垂直方向上都位于小蓝色方块内，我将其命名为“左方 - 容器”。但是目前图像仅在div的顶部水平居中。

如果有人可以提供帮助，我会很感激。

＆＃13;

@keyframes slideInFromAbove {
  0% {
    transform: translateY(-100%);
  }
  6% {
    transform: translateY(0);
  }
  98% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes slideInFromTheLeft {
  0% {
    opacity: 1;
    transform: translateX(-100%);
  }
  4.4% {
    opacity: 1;
    transform: translateX(0);
  }
  97% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes slideInFromBelow {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes slideInFromTheLeft-Text {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

.follower-container {
  display: flex;
  font-family: 'Roboto';
  position: absolute;
  overflow: hidden;
  /*hide elements when they overflow*/
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.left-square-container {
  width: 100px;
  height: 100px;
  background: #0d47a1;
  position: relative;
  display: inline-block;
  float: left;
  z-index: 1;
  transform: translateX(-100%);
  animation: 9.6s 1 slideInFromAbove;
  /* timing (.4s duration + 8s hold + .4s removal of self + animation of right + removal of right) */
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

.icon img
/*THIS IS THE DIV TO CHANGE THE IMAGE ALIGNMENT*/

{
  display: block;
  margin: 0 auto;
  webkit-filter: drop-shadow(1px 1px 1px #212121);
  filter: drop-shadow(1px 1px 1px #212121);
}

.right-retangle-container {
  width: 400px;
  height: 100px;
  opacity: 0;
  background: #292929;
  border-top: 5px solid #0d47a1;
  box-sizing: border-box;
  display: inline-block;
  float: left;
  position: relative;
  /* needed for z-index*/
  z-index: 0;
  /*place under left square*/
  transform: translateX(-100%);
  animation: 8.8s .6s 1 slideInFromTheLeft;
  /* timing (.5 initial animation duration + 8s hold + .3s removal of self) additional .6s of delay for animation of left square*/
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

.text {
  font-size: 30px;
  color: #ffffff;
  overflow: hidden;
  text-align: center;
  /*vertical alignment of text*/
  position: relative;
  /*horizontal alignment of text*/
  top: 50%;
  /*horizontal alignment of text*/
  transform: translateY(-50%);
  /*horizontal alignment of text*/
}

.text-animation {
  transform: translateY(100%);
  animation: .5s 1s 1 slideInFromBelow;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  margin-left: 20px;
  margin-right: 20px;
}

.keyword:not(.user_message) {
  color: #f57f17;
}

＆＃13;

<div class="follower-container">
  <div class="left-square-container">
    <div class="icon">
      <img class="image" src="{image}" />
    </div>
  </div>

  <div class="right-retangle-container">
    <div class="text">
      <div class="text-animation">
        New Follower <span class='keyword name'>{name}</span></div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

有几种方法可以做到这一点，但由于您已经在使用flexbox，我建议您继续使用该路径。

在.left-square-container div上，只需将显示更改为display:flex，然后设置align-items: center;和justify-content: center;。

似乎适合我。 Fiddle

Answer 2

如果您知道容器的height，则可以将所述容器的line-height设置为其height的值。

我将您的CSS更新为：

.icon {
  text-align: center;
  heignt: 100px;
  line-height: 100px;
}

Answer 3

“icon”div没有任何指定的高度。它被声明为块。因此，您不能指望垂直对齐此div内的图像，因为屏幕上div高度范围的范围仅为图像的大小。即使在“icon”的css中，你也说过 margin：0 auto; - ＆gt;该命令将图像在中心而不是垂直对齐，而只是水平对齐。对于你想要发生的事情，那个0应该是自动的，然后应该有一个div的高度，看它在垂直中心对齐。

不能垂直居中图像，但横向工作

3 个答案: