CODEWITHSUNDEEP
htmlcssvertical-alignment
XNL073
XNL073

Reputation: 105

Vertical align an div without a static height

I'm creating a pagetitle with breadcrumbs. Now I want to vertical align te breadcrumbs. The div doesn't have a static height as it grows with the font-size and margin.

<div style="display: block; float: left; width: 100%;">
	<h1 style="float: left; text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
	<div style="float: right; vertical-align: middle;">
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

You can see a preview of my problem here: enter image description here

Upvotes: 0

Views: 63

Answers (4)

Dmitriy
Dmitriy

Reputation: 4503

use instead float - display: inline-block;

.wrap{
    display: block; 
    float: left; 
    width: 100%;
    font-size: 0;
}
.wrap > div {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    width: 50%;
}
.wrap > div:nth-of-type(2){
    text-align: right;
}
<div class="wrap" style="">
	<div>
    <h1 style="text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
    </div>
	<div>
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

Upvotes: 1

bugkiller
bugkiller

Reputation: 164

I'd try to use display: table based vertical-alignment. Or, if you use modern browsers, flexbox is your god :)

<div style="display: table;">
  <div style="display: table-cell; width:100%; ">
    <h1 style="margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
  </div>
  <div style="display: table-cell; white-space:nowrap; vertical-align: middle;">
    <a href="#" target="_self">Home</a> / Home / Home
  </div>
</div>

Upvotes: 0

Bogdan Kuštan
Bogdan Kuštan

Reputation: 5577

My favorite method is to use transformation on aligned element

<div style="display: block; float: left; width: 100%;position: relative;">
	<h1 style="float: left; text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
	<div style="position: absolute; top: 50%;transform: translateY(-50%);right: 0;">
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

Upvotes: 0

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

Use line-height for right div:

<div style="display: block; float: left; width: 100%;">
	<h1 style="float: left; text-align: left; margin: 0px;">
		<i class="fa fa-star-o"> </i> Information
	</h1>
	<div style="float: right; vertical-align: middle;line-height:40px;">
		<a href="#" target="_self">Home</a> / Home / Home
	</div>
</div>

Upvotes: 0

Related Questions