i am new to html and css and i couldn't figure out how to center align child div inside parent div.This is my code please answer and solve my problem.
CSS
.page {
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}
.window {
float:center;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:auto;
margin-right:auto;
}
* {
padding:0px;
margin:0px;
}
HTML
<div class="page">
<div class="window"><!-- i want to center align this div inside above div -->
</div>
</div>
Your "window" div is CORRECTLY centered within the "page" div.
Your problem is that the page div is not centered within
<html></html>
.To achieve this add the following code:
First of all there is nothing called
float:center;
,float
has only 3 valid values which arenone
,left
andright
.Inorder to center any element you need to define some
width
first and than usemargin: auto;
to center it horizontally.Demo
The other way to center an element is to use
text-align: center;
on the parent element, but this is a dirty way to do so.You can also use CSS positioning techniques like nesting a
absolute
element inside arelative
positioned element, and than we center it by usingleft: 50%;
and than we deduct 1/2 of the totalwidth
of the element by usingmargin-left: -100px;
(total elementwidth
say is200px
). You can alsocenter
the element vertically.The other way to have an element centered vertically as well as horizontally is to use
display: table-cell;
property along withvertical-align: middle;
Demo
Try this,
This may work.
to center horizontally
To center vertically and horizontally both
Please check here: