1) Hi, http://www.getustad.com/TableProject/ is a 10 columns page that I need to be in center of the page, If I change resolution of page [move to bigger screen ] , all columns shouldn't move to left.
2) How to make html view independent of screen resolutions ?
Please help Thanks
wrap all the columns in a div which has a set width property something like
<div id="main_body">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
Set the css properties of main_body to whatever u want. ex: align:center. width:840px; etc
If the table has the id "mytable", you would do this:
table#mytable
{
margin-left: auto;
margin-right: auto;
width: 50em;
}
It doesn't work in older browsers, though.
Hey now you can change your html and css code as like this
Css Code
#main{
margin:0 auto;
border:solid 1px red;
text-align:center;
}
.box{
margin:2px;
background:rgba(0,0,0,0.2);
display:inline-block;
vertical-align: top;
}
HTML Code
<div id="main">
<div class="box">
<img src="">
<p>Oncenter</p>
</div>
<div class="box">
<img src="">
<p>Oncenter</p>
</div>
<div class="box">
<img src="">
<p>Oncenter</p>
</div>
<div class="box">
<img src="">
<p>Oncenter</p>
</div>
</div>
Live demo http://jsfiddle.net/TKMCc/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.