Question

我试图将图像和文本居中在div的中间。当我这样做时，文本不再垂直居中，它会下降。如何实现文本垂直居中？

HTML：

<div>
        <div class="secureHome-sessions-top-status0">
            <div class="secureHome-sessions-top-status-img0"></div>
            Status
        </div>
</div>
<div>
        <div class="secureHome-sessions-top-status"> 
            <div class="secureHome-sessions-top-status-img"></div>
            Status <!-- <-- this is not centered vertically anymore -->
        </div>
</div>

的CSS：

div.secureHome-sessions-top-status0 {
  float:left;
  width: 10%;
  margin-left:2%;
  height: 20px; 
  background:lightblue;
}
div.secureHome-sessions-top-status-img0 {
  float:left;
  width: 20px; 
    height: 20px; 
  background: red;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
  background-repeat: no-repeat;
    background-position: center; 
    background-size: contain;
}




div.secureHome-sessions-top-status {
  float:left;
  width: 10%;
  margin-left:2%;
  height: 20px; 
  background:lightblue;
  text-align:center;
}
div.secureHome-sessions-top-status-img {
    display:inline-block;
  width: 20px; 
    height: 20px; 
  background: red;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
  background-repeat: no-repeat;
    background-position: center; 
    background-size: contain;
}

Answer 1

尝试将此CSS添加到您的非浮动赞成div：

vertical-align：middle;

当您将第二个div设置为“inline-block”时，将div放在文本字符串中而不是旁边。由于div高于文本，它会拉伸线条高度，然后文本就会落到原位。 vertical-align：middle将阻止你将div与字符串的其余部分对齐。

Answer 2

当你使用inline-block时，你会创建一个类似span的包装器，文本总是从底部开始。要解决此问题，请在课程vertical-align:middle中使用div.secureHome-sessions-top-status-img问题得到解决。

但我建议你在不同的块中使用所有文本和图像。它将帮助您维护内容。

<div>
        <div class="secureHome-sessions-top-status0">
            <div class="secureHome-sessions-top-status-img0"></div>
            <div>this is center</div>
        </div>
</div>
<div>
        <div class="secureHome-sessions-top-status">
            <div class="secureHome-sessions-top-status-img"></div>
            <div>this isn't center</div>
        </div>
</div>

CSS

    <style>
    div.secureHome-sessions-top-status0 {
     float: left;
     width: 20%;
     margin-left: 2%;
     height: 20px;
     background: lightblue;
 }
 div.secureHome-sessions-top-status-img0 {
     float: left;
     width: 20px;
     height: 20px;
     background: red;
     background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     vertical-align: middle;
 }
 div.secureHome-sessions-top-status {
     float: left;
     width: 20%;
     margin-left: 2%;
     height: 20px;
     background: lightblue;
     text-align: center;
 }
 div.secureHome-sessions-top-status-img {
     display: inline-block;
     width: 20px;
     height: 20px;
     background: red;
     background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
     vertical-align: middle;
 }
    </style>

Answer 3

在img0中，你正在使用浮动。浮动元素不在页面页面中正常的“流程”。因此，当您使用浮动时，图像不会干扰文本。你可以尝试纵向对齐，但这可能会使图像稍微脱臼。

如果你将图像和文本包装在一个单独的div中并且只是居中那个div然后你可以使浮动没有问题会更好。

ValueAnimator va = ValueAnimator.ofInt(mParams.x, 300);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    public void onAnimationUpdate(ValueAnimator animation) {
        Integer value = (Integer) animation.getAnimatedValue();
        mParams.x = value.intValue();
        mWM.updateViewLayout(myView, mParams);
    }
});

div.secureHome-sessions-top-status0 {
  float:left;
  width: 10%;
  margin-left:2%;
  height: 20px; 
  background:lightblue;
}
div.secureHome-sessions-top-status-img0 {
  float:left;
  width: 20px; 
    height: 20px; 
  background: red;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
  background-repeat: no-repeat;
    background-position: center; 
    background-size: contain;
}


.in-center {
    display: inline-block;
}

div.secureHome-sessions-top-status {
  float:left;
  width: 30%;
  margin-left:2%;
  height: 20px; 
  background:lightblue;
  text-align:center;
}
div.secureHome-sessions-top-status-img {
    float: left;
  width: 20px; 
    height: 20px; 
  background: red;
      background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
  background-repeat: no-repeat;
    background-position: center; 
    background-size: contain;
}

http://jsfiddle.net/8hmwojk5/

Answer 4

这可能更适合作为评论，因为它没有回答所提出的限制内的问题，但我还不能留下评论;尽管如此，我希望它有所帮助。

如果您能够使用Flexbox，这种布局变得微不足道。

.container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  background: lightblue;
  margin: 0.5rem;
  padding: 0 0.5rem;
  width: 20%;
}
.icon {
  flex: 0 0 20px;
  height: 20px;
  background: red;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Thumbs_up_font_awesome.svg/512px-Thumbs_up_font_awesome.svg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.text {
  padding: 0 0.5rem;
}

<div class="container">
  <div class="icon"></div>
  <div class="text">This is centered.</div>
</div>

垂直居中文本：文本旁边的内联块div

4 个答案: