Reputation: 947
I have a header in a div like this
When I make the broswer small it looks like this:
But I want it to look like this:
how do I do that?
html:
<div class="wrapper">
<h4>ALongText LikeThisOne</h4>
</div>
css:
.wrapper{
border:1px red solid;
height:60px;
}
.wrapper h4{
margin-top: 0;
padding-top: 20px;
text-align: center;
}
jsfiddle: http://jsfiddle.net/4cBxt/
Upvotes: 2
Views: 145
Reputation: 41872
You can also try transform
property:
.wrapper h4 {
margin-top: 0;
position: relative;
text-align: center;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Upvotes: 2
Reputation: 827
Use vertical-align, text-align along with display css properties to render the text within the Div vertically and horizontally center.
.wrapper{
border:1px red solid;
height:60px;
display: table;
}
.wrapper h4{
margin-top: 0;
display: table-cell;
vertical-align: middle;
text-align: center;
}
JS Fiddle : http://jsfiddle.net/4cBxt/2/
Upvotes: 2