CODEWITHSUNDEEP
css
Ximik
Ximik

Reputation: 2495

CSS: inline-block vs inline text

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

Upvotes: 0

Views: 165

Answers (2)

Mark
Mark

Reputation: 6855

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

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32172

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

Upvotes: 1

Related Questions