CODEWITHSUNDEEP
htmlcss
Elyor
Elyor

Reputation: 5532

using vertical align and height together

if i use vertical-align: middle; itself without giving height, it is working. once i give height, vertical-align is not working.

CSS

.inlineblock{
    display: inline-block;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    padding:  10px;
    background: #4f81bd;
    color: #fff;
    height: 200px;
}

HTML

<div class="inlineblock">
<p>information here</p>
</div>
<div class="inlineblock">
<p>more information here</p>
</div>
<div class="inlineblock">
<p>another more information here</p>
</div>

How can use use vertical-align: middle together with height?

JSFIDDLE

Upvotes: 1

Views: 22

Answers (1)

Mukul Kant
Mukul Kant

Reputation: 7122

You should use display: table-cell

.inlineblock{
    display: table-cell;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    padding:  10px;
    background: #4f81bd;
    color: #fff;
    height: 200px;
}
<div class="inlineblock">
<p>information here</p>
</div>
<div class="inlineblock">
<p>more information here</p>
</div>
<div class="inlineblock">
<p>another more information here</p>
</div>

UPDATE :

section{
	display:table;
	border-collapse:separate;
	border-spacing:5px;
	}
.row {
	display:table-row;
}
.inlineblock {
	display:table-cell;
	width: 100px;
    text-align: center;
    vertical-align: middle;
    padding:  10px;
    background: #4f81bd;
    color: #fff;
    height: 200px;
}
<section>
	<div class="row">
		<div class="inlineblock">
   		  <p>information here</p>
		</div>
		<div class="inlineblock">
		  <p>more information here</p>
		</div>
		<div class="inlineblock">
		  <p>another more information here</p>
		</div>
	</div>
</section>

Upvotes: 1

Related Questions