Using CSS instead of tables to create a centered column of images
Consider the task of replacing this table with CSS stylings:
<table border="1">
<tr><td align="center">
<img src="foo" />
</td></tr>
<tr><td align="center">
<img src="bar" />
</td></tr>
<tr><td align="center">
<img src="bat" />
</td></tr>
</table>
The desired output is 3 images stacked on开发者_如何学JAVA top of each other. The images are centered on the widest of them all.
How would you style this markup with <div> around those <img> tags with CSS to achieve the same look?
<div class="images">
<img src="foo" />
<img src="bar" />
<img src="bat" />
</div>
and in CSS
div.images img {
display: block;
margin: 0 auto;
}
if you really want to use a DIV element do it like that:
html:
<div class="imgContainer">
<img src="blabla.jpg" alt="blabla" />
<img src="blabla2.jpg" alt="blabla" />
<img src="blabla3.jpg" alt="blabla" />
</div>
css:
div.imgContainer {
width: auto;
text-align: center;
}
div.imgContainer img{
display: block;
}
<p style="text-align:center;width:auto;"><img /><br /><img /><br /><img /></p>
<style>
div.table img {
display: block;
margin: 0 auto;
}
</style>
<div class="table">
<img src="foo" />
<img src="bar" />
<img src="bat" />
</div>
something like that
Centered on the whole page:
<html>
<style>
.centeredDiv
{
width:400px;margin-left:auto;margin-right:auto;background-color:#FF0000;
}
</style>
<body style="text-align:center;" >
<div class="centeredDiv">
<div>image</div>
<div>image</div>
<div>image</div>
</div>
</body>
</html>
加载中,请稍侯......
精彩评论