CODEWITHSUNDEEP
htmlcss
user3550879
user3550879

Reputation: 3469

display: inline block and vertically centred

I have three divs and I want them to display beside each other and centred. It goes image, 1px divider then text. I want them to be vertically centred compared to the ones beside them.

HTML

    <div class="sub-logo-wrap">
        <div class="sub-logo"><img src="..." width="auto" height="30px" /></div>            
        <div class="divider"></div>
        <div class="sub-logo-text"><p>text ... can be more than one line ... </p></div>
    </div>

CSS

.sub-logo-wrap > div { 
  display: inline-block; 
}

.divider { 
  width: 1px;
  height: 20px;
}

.sub-logo-text { 
  width: 150px; 
}

the problem is when the text goes to more than one line the centering of the text no longer works

Upvotes: 1

Views: 58

Answers (2)

Stickers
Stickers

Reputation: 78676

That can be done easily.

.sub-logo-wrap > div {
    display: inline-block;
    vertical-align: middle;
}

JSFIDDLE DEMO

Also add this if you need extra accuracy.

.sub-logo img {
    display: block;
}

Or

.sub-logo img {
    vertical-align: top;
}

Upvotes: 2

Mindastic
Mindastic

Reputation: 4121

Try with:

.sub-logo-wrap > div { 
  display: inline-block; 
  vertical-align: top;
}
.sub-logo-text {
  line-height: 30px; /* Image height */ 
  width: 150px; 
}

You can, also, use flexbox:

.sub-logo-wrap {
 display: flex;
 flex-direction: row;
 align-items: center;
 align-content: center;
}
.sub-logo-wrap > div {
 /* No need to add display: inline-block */
}

Upvotes: 0

Related Questions