Center text vertically: inline div block next to text

Question

Link to fiddle: https://jsfiddle.net/ernhep2a/2/

I am trying to center the image and text in the middle of the div. When I do this, the text is no longer centered vertically, it crashes. How can I ensure that the text is centered vertically?

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

Try adding this CSS to your non-floating thumb up div:

vertical-align: middle;

div " ", div , . div , , . : , div .

Answer 2

, , 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 float. "" . , float, . , , , .

It’s better if you wrap the image and text in a divided div and just center the div, then you can easily place a float.

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

<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="in-center">
                <div class="secureHome-sessions-top-status-img"></div>
                Status
            </div>
        </div>
</div>

Run codeHide result

http://jsfiddle.net/8hmwojk5/

Answer 4

This is probably better suited as a comment because it does not answer the question within the limits of the presented restrictions, but I cannot leave comments for now; nonetheless, I hope this is helpful.

If you can use Flexbox, this kind of layout becomes trivial to implement.

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

Run codeHide result