CSS: inline-block vs inline text

Question

I want my block to be set by line-height (just like i do with text). As i know i should use display: inline-block in this case, but this doesn't work for me. Why?

HTML:

<div class="block">
    <div></div>
</div>
<div class="block">
    test
</div>

CSS:

.block {
    line-height: 50px;
    height: 50px;
    width: 50px;
    border: 1px solid black;
}
.block div {
    height: 40px;
    width: 28px;
    background-color: #f0f;
    display: inline-block;
}

Live demo: jsFiddle

That is doing exactly what you told it to do, what is your expected outcome? — Kyle
– Kyle, Commented Aug 16, 2012 at 11:07
I want pink ".block div" to be centered in the middle of the main ".block". I don't want to use hacks for block-elements because i have to change the height of the text and the inline div in the same time. — Ximik
– Ximik, Commented Aug 16, 2012 at 11:14

Rohit Azad Malik · Accepted Answer · 2012-08-16 11:13:38Z

1

hi now add your div aertical-align middle in your css

.block div {
     vertical-align: middle;
}

Demo

-------------------------------------------- now if you want to center this box than add text-align center as like this

.block {
    text-align: center;
}

Demo

answered Aug 16, 2012 at 11:13

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ximik Over a year ago

vertical-align: middle; was the answer. Thank you.

Mark · Accepted Answer · 2012-08-16 11:15:10Z

1

i guess you are trying to center the purple block vertical?

in that case your mixing thing up:

a <div> is a block-level element, where text is not. so if you say line-height, you specify text-alignment of the content for that element, not positioning of a block element, to solve the centering of that purple block, use padding or margin:

.block div {
    height: 40px;/* 50 - 40 = 10pixel/2 = 5px space */
    width: 28px;
    background-color: #f0f;
    margin-top: 5px;
}

Demo over here jsFiddle

answered Aug 16, 2012 at 11:15

Mark

6,8731 gold badge35 silver badges51 bronze badges

Collectives™ on Stack Overflow

CSS: inline-block vs inline text

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related