I am trying to center a div inside another div. I have tried the following HTML and CSS
HTML
<div class="header">
<div class="homeImageText">
<h1>Document Preparation Like Never Before</h1>
</div><!--homeImagetext end-->
</div>
CSS
.homeImageText {
left:0; right:0;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
}
header{
background: url(../images/header1.png) center center no-repeat; ;
height: 600px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Live jsfiddle
Vertically centering div items inside another div Just set the container to display:table and then the inner items to display:table-cell . Set a height on the container, and then set vertical-align:middle on the inner items. This has broad compatibility back as far as the days of IE9.
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
To move the inner div container to the centre of the parent div we have to use the margin property of style attribute. We can adjust the space around any HTML element by this margin property just by providing desired values to it.
For vertical centering, make the wrapping div
set to display-table
and the child to display:table-cell
with vertical-align:middle
. Horizontal centering can then simply be accomplished with text-align:center;
Try the CSS:
.header {
height: 600px;
display:table;
width:100%;
}
.homeImageText {
height:100%;
display:table-cell;
vertical-align:middle;
text-align:center;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With