CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 59

How to center the left floated items in CSS?

I have the below code in my CSS file which results in my grid/box items displaying to the left of the webpage. However I'd like them to be centered. I tried removing float;left and many alternatives but nothing works. What can I add/remove from the below to center them?

GRID:

width:170px;
height:235px;
background:#f4f4f4;
border:1px solid #dedede;
padding:4px;
border-radius:4px;
text-align: center;
float:left;
margin:9px;
margin-bottom:20px;
position:relative

and XX>LI:

display: block;
margin-bottom: 3px;
margin-top: 0px; 
overflow:hidden

Upvotes: 0

Views: 84

Answers (3)

super11
super11

Reputation: 476

If you have access to html simply

<center>text</center>

or

if you still want to use CSS remove

float: left;

and add

display: inline-block; 
text-align: center;

Upvotes: 0

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

If i understood what you're asking, you should remove the float: left on the element and put display: inline-block, then text-align: center on the container

http://jsfiddle.net/2t523d92/1/

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33813

Unless you wish to use flex-boxes ( which make this very easy ) usually I would try something along the following lines. It is the margin:9px auto combined with float:none that does the trick:

.centred{
    display:block;
    float:none;
    /* a combination of float:none and left/right margin of auto */
    margin:9px auto;

    width:170px;
    height:235px;
    background:#f4f4f4;
    border:1px solid #dedede;
    padding:4px;
    border-radius:4px;
    text-align: center;


    margin-bottom:20px;
    position:relative;
    box-sizing:content-box;
}

Upvotes: 1

Related Questions