Nowadays most of the internet users use wide screen monitors to browse internet. It will be strange if website aligned to leftside and it affects the authority of the website. So websites must change according to the size of the viewing screen. Lets see the steps to align a webpage horizontally center to a webpage.
Method 1
Before creating the elements of the webpage, we wrap the whole elements with 2 wrapper div's. The outer wrapper div will have the full width of the browser. The inner wrapper div is used as a outline of the template, which will the maximum width of the webpage.
<html>
<title>HTML Explorer : Demo - center a webpage.</title>
<style type="text/css">
#outer_wrapper{
width:100%; //Fill as a background on the entire browser window.
}
#inner_wrapper{
width:1000px; //set maximum width of the website here.
}
</style>
<body>
<div id="outer_wrapper" align="center">
<div id="inner_wrapper">
<!-- Put the whole content here. -->
</div>
</div>
</body>
</html>
Method 2
Most of the designers will use this method to center the webpage. This uses the auto margin style of the outer element. This method used the body and outer container to align the website to middle of the screen.
<html>
<title>HTML Explorer : Demo - center a webpage.</title>
<style type="text/css">
body{
text-align: center;
}
#outer_wrapper{
margin: 0 auto;
}
</style>
<body>
<div id="outer_wrapper">
<!-- Put the whole content here. -->
</div>
</body>
</html>
0 comments:
Post a Comment