Using CSS instead of tables to create a centered column of images_问答_开发者

Using CSS instead of tables to create a centered column of images

开发者 https://www.devze.com 2022-12-26 15:43 出处：网络

Consider the task of replacing this table with CSS stylings: <table border=\"1\"> <tr><td align=\"center\">

相关专题：css

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>