ansaurus

Question

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

Answer 1

+1 A:

<p style="text-align:center;width:auto;"><img  /><br /><img /><br /><img  /></p>

vittore 2010-04-07 21:39:09

its not very clean to use <br />. They are used for line breaks in text, not to style your content.

meo 2010-04-07 21:52:27

@david: img basically inline element, so that's it - simplest way without additional styling

vittore 2010-04-07 23:03:14

Answer 2

+4 A:

<div class="images">
  <img src="foo" />
  <img src="bar" />
  <img src="bat" />
</div>

and in CSS

div.images img {
  display: block;
  margin: 0 auto;
}

Tomalak 2010-04-07 21:43:53

wauww was thinking the same way

x4tje 2010-04-07 21:48:27

Answer 3

+1 A:

<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

x4tje 2010-04-07 21:47:05

margin: 0 auto; only works if you specify the with of an element.

meo 2010-04-07 21:50:50

@david: a DIV is as wide as is can be.

Tomalak 2010-04-07 22:09:45

Answer 4

+2 A:

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;
}

meo 2010-04-07 21:50:22

Answer 5

A:

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>

DShultz 2010-04-07 21:58:35

ansaurus

tags:

views:

answers:

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

related questions