Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Aligning a float:left div to center?

Tags:

html

css

I want to have a group of images display horizontally across the page. Each image has a few link below it so I need to put a container around each image/link-group.

The closest I have gotten to what I want is putting them in divs that float:left. The problem is I want the containers to align center not left. How can I achieve this.

like image 889
Mike Avatar asked Apr 02 '11 14:04

Mike


People also ask

How do I center a div with float?

First, remove the float attribute on the inner div s. Then, put text-align: center on the main outer div . And for the inner div s, use display: inline-block .

How do I align a div element to the center?

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

How do you float Content Center?

To center the text using float we can use margin-left or margin-right and make it 50% , like below. You can learn more about the uses of Float here.


1 Answers

use display:inline-block; instead of float

you can't centre floats, but inline-blocks centre as if they were text, so on the outer overall container of your "row" - you would set text-align: center; then for each image/caption container (it's those which would be inline-block;) you can re-align the text to left if you require

like image 64
clairesuzy Avatar answered Sep 17 '22 19:09

clairesuzy