Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS aligning images horizontally

Tags:

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.

like image 410
yash Avatar asked Nov 20 '12 07:11

yash


People also ask

How do you align images in CSS?

To center an image with CSS Grid, wrap the image in a container div element and give it a display of grid . Then set the place-items property to center. P.S.: place-items with a value of center centers anything horizontally and vertically.

How do I horizontally center an image?

Step 1: Wrap the image in a div element. Step 2: Set the display property to "flex," which tells the browser that the div is the parent container and the image is a flex item. Step 3: Set the justify-content property to "center." Step 4: Set the width of the image to a fixed length value.

Is there horizontal align in CSS?

Elements can be aligned horizontally with the help of CSS float property which aligns multiple elements to either left/right and not in center or using CSS positioning scheme absolute method.


1 Answers

display: block; margin-left: auto; margin-right: auto  
like image 145
Chris Avatar answered Oct 30 '22 07:10

Chris