Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

how to make the images always in center

how to make the images always in center

Problem

I want to put 6 images in this page, and need to be the max number of photos in one line is 3 and min is 2, when I increase or decrease the browser size.

How make the size of the image get bigger or smaller when I increase or decrease the browser size?


This is my css stylesheet what i need to add

div.img
{
  margin: 5px;
  padding: 5px;
  border: 0px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}   
div.img img
{
  display: inline;
  margin: 5px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff;}
div.desc
{
  text-align: center;
  font-weight: normal;
  width: 200px;
  margin: 5px;
}
Problem courtesy of: Anan Amer

Solution

Best way to do this is to use:

margin-left:auto;
margin-right:auto;

also dont forget to make sure that your containing element has:

text-align:center;

Hope this helps!

Solution courtesy of: KM123

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

how to make the images always in center

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×