vetical-align a line of text in container

After reading something on vertical-align here, i'm decide to do some practice on this feature, but stuck into a problem that really hard to understand. could you please figure out why "the line of text" does not get vertical-aligned in wrapper div.

.wrapper
height: 200px;
background-color: aquamarine;
margin: 0;
padding: 0;


.ctxt
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;


.ctxt-before
display: inline-block;
width: 10px;
height: 200px;
background-color: #f66;
margin: 0;
padding: 0;


<div class="wrapper">
<!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
<div class="ctxt-before"></div>
<p class="ctxt">this line of text</p>
</div>

I think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper.

4 Answers
4

You've almost got the idea, but you're aligning the middle of the ctxt div with the baseline of the ctxt-before div. Because that has no content, its baseline is its bottom edge.

You need to align it with the middle of the ctxt-before div instead:

.wrapper
height: 200px;
background-color: aquamarine;
margin: 0;
padding: 0;


.ctxt
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;


.ctxt-before
display: inline-block;
width: 10px;
height: 200px;
background-color: #f66;
margin: 0;
padding: 0;
vertical-align: middle; /* add this */


<div class="wrapper">
<!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
<div class="ctxt-before"></div>
<p class="ctxt">this line of text</p>
</div>

The reasons why you got that result is:

div.ctxt-before

middle

inline or inline-block

baseline

div.ctxt-before

div.ctxt-before

p.ctxt

If you just want div.ctxt-before element and p.ctxt element to be vertical-aligned in middle, you miss:

div.ctxt-before

p.ctxt

middle

.ctxt-beforevertical-align: middle;


Using flex box you can do this easily.

.wrapper
height: 200px;
background-color: aquamarine;
align-items: center;
text-align: center;
display: flex;
justify-content: center;



https://codepen.io/ssniranga/pen/dqKaNe

Yours doesn't work because vertical-align is for tables. When display modes, box-model, and positions are considered, it's easy to see that css layout has many aspects. You'll have to read about them to truly understand what's going on.

vertical-align

Try using flexbox, they make this stuff easy:

.wrapper
height: 200px;
background-color: aquamarine;
display: flex;
justify-content: center;
align-items: center;


.ctxt-before
display: inline-block;
width: 10px;
height: 200px;
background-color: #f66;
margin: 0;
padding: 0;


<div class="wrapper">
<!-- i think the line-box is 200px and div.ctxt should vertical-aligned in div.wrapper -->
<div class="ctxt-before"></div>
<p class="ctxt">this line of text</p>
</div>

vertical-align

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.