CODEWITHSUNDEEP
htmlcss
basickarl
basickarl

Reputation: 40464

Center text vertically: inline-block div next to text

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

Upvotes: 4

Views: 627

Answers (4)

Fissure King
Fissure King

Reputation: 1270

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>

Upvotes: 0

Velko Georgiev
Velko Georgiev

Reputation: 694

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/

Upvotes: 0

Anuj Rastogi
Anuj Rastogi

Reputation: 98

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>

Upvotes: 1

Skyrider
Skyrider

Reputation: 36

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.

Upvotes: 2

Related Questions