Center text vertically: inline-block div 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 so the text is no longer centered vertically, it drops down. How can one achieve so 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;
}

Possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — Rob, Nov 11 '15 at 23:15

score 2 · Accepted Answer · answered Nov 11 '15 at 23:12

2

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

vertical-align: middle;

When you set the second div to "inline-block" that placed the div in your text string instead of beside it. Since the div is taller than the text, it's stretching the line height and the text just falls in place afterwards. The vertical-align:middle will prevent that by centering your div against the rest of the string.

answered Nov 11 '15 at 23:12

Skyrider

36
3

Indeed it works, adding `vertical-align: middle;` to the css which has the `display:inline-block;` did the trick! – basickarl Nov 11 '15 at 23:15

score 1 · Answer 2 · answered Nov 11 '15 at 23:17

When you use inline-block, then you make a wrapper which will behave like span and text would always start from the bottom. to fix this issue please use vertical-align:middle in class div.secureHome-sessions-top-status-img issue will get resolve.

But I would recommend you to use all the text and images in separate blocks. It will help you in maintaining the content.

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

score 0 · Answer 3 · answered Nov 11 '15 at 23:19

In img0 you're using float. Float elements are not in the page page normal "flow". So when you use float the image is not interfering to the text. you could try vertical-align but that probably will dislocate the image a bit.

It will be better if you wrap the image and the text in a separated div and just center that div then you can make the float with no problem.

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>

http://jsfiddle.net/8hmwojk5/

score 0 · Answer 4 · answered Nov 11 '15 at 23:52

This is probably better suited as a comment as it does not answer the question within the constraints presented, but I am not yet able to leave comments; nonetheless, I hope it is helpful.

If you are able to use Flexbox, this sort 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>

Center text vertically: inline-block div next to text

4 Answers4