CODEWITHSUNDEEP
csshtml
patrickrgaffney
patrickrgaffney

Reputation: 11

Horizontally Center a <div> that is not fixed

I want to horizontally center a column in a responsive grid I'm trying to make. I have the grid set up, and it works just fine. But I want to make a .class that will take a column and center it horizontally in the parent (.row). I would use this class to take a one-column-row and center the column in said row. I can center the text using the text-align property, but I want the entire column to be centered that way if I add a border/background to the column it will be centered in the row, not just the column's content.

Here is the codepen.

Upvotes: 1

Views: 54

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 241248

Given that you are setting a width on the column, simply use margin:0 auto to center it. You would need to overwrite float:left with float:none though..

UPDATED EXAMPLE HERE

.center {
    text-align: center;
    margin:0 auto;
    float:none;
}

Alternatively, if the element doesn't have a fixed width set on it, you could simply make it an inline-block element and add text-align:center to the parent. Perfect for dynamically varying widths.

Upvotes: 1

Related Questions