22

I am new to css and I am trying to align my images horziontally inside a div element.

I tried float and display : inline but still they are aligning vertically .

#maincontainer {
   left : 50px;
 top : 80px;
 width : 300px;
 height : 100px;
 border : solid 2px #0f0f0f;
 position : absolute;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :relative; 
    float : left; 
   }

Please help and tell me if I am wrong smwhere.

1

6 Answers 6

17
display: block;
margin-left: auto;
margin-right: auto 
8

horizontally aligned
html

<div id="maincontainer">
    <img />
</div> 

css

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     }
     #maincontainer img {
        width : 80px;
        height : 80px;
        margin:0 auto;
        display:block;
        background:red;
    }​

vertically and horizontally aligned
html

 <div id="maincontainer">
        <div><img /></div>
    </div> ​

css

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     display:table;
     }
     #maincontainer div img {
        width : 80px;
        height : 80px;
        background:red;
        display:inline-block;
    }
    #maincontainer div{
     display:table-cell;
       text-align: center;
        vertical-align: middle;
    }​

just remove background:red from img

4

As long as the parent container is wide enough for the images, they will naturally sit side-by-side. When the row of images becomes too wide for the container, the images will start to wrap down to a new line of text.

Also, white space (space, tab, and newline characters) will be rendered as a text space between two images. To prevent this, make sure there are no white space characters between the IMG tags.

Images can be forced to overflow the parent container's width by setting the CSS white-space: nowrap; on the parent element. This can cause undesired effects if the container gets too narrow, but can also be used to create a horizontal scrollbar by adding overflow: auto; to the containing element.

Finally, image tags can have a vertical-align CSS property. By default it is vertical-align: baseline;. This creates a few pixels of white space beneath the image. You can counter this by setting vertical-align: top; for the image in the CSS.

See this fiddle for some examples with pictures.

1
  • Hey thank you this fiddle solved my problem. The white-space : nowrap part.
    – yash
    Nov 20, 2012 at 9:29
1

If your div is wide enough to contain all your images in one row, then you can simply try something like this :

#maincontainer img {
float:left;
margin-right:10px;
}

see it live: http://tinkerbin.com/mIBcXNcS That's the basic code, but it can vary depending on your html code....

0

Hi now Change to your position according to this

Now define your parent position relative and give to child absolute

#maincontainer {
 position : relative;
 }

 #maincontainer img {
    position :absolute; 
   }

-----

I think u want to this

now change some properties of your css

and now add the margin-top and margin-left remove top or left in your parent id maincontainer

as like this

#maincontainer {
 width : 300px;
 height : 100px;
  margin-top:80px;
  margin-left:50px;
 border : solid 2px #0f0f0f;
 position : relative;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :absolute; 
  vertical-align:top;
   }

Live Demo

1
  • 2
    This is unnecessary when floating elements. Nov 20, 2012 at 7:16
0
  1. You need to apply display:block; to the IMG element for floats to work. inline elements cannot be floated.
  2. Alternatively, define IMG as display:inline-block;, but be aware that this is not supported by older browsers
  3. As a side note, try to avoid as much as you can from defining height in CSS (or use min-height). Unlike the width, the height of many elements, especially a main container, should be flexible.

Not the answer you're looking for? Browse other questions tagged or ask your own question.