CODEWITHSUNDEEP
htmlcss
Solace
Solace

Reputation: 9010

How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

I have a element, and this element has another element which contains a <table>.

For some reasons, I can not manipulate the CSS of the inner <div> or the <table> it contains.

I need to horizontally align the <table> (or the inner <div> which contains the <table>, doesn't matter, I just need to show the table aligned in the center) in the center of the outer <div>, by manipulating the CSS of the outer <div> only.

The border and padding properties seem to move the outer itself, what I need is to place its contents in its center (horizontally). How can I do that?

The width of the outer <div> is 590px.

PS: I can use inline CSS only.

Upvotes: 0

Views: 67

Answers (3)

Danield
Danield

Reputation: 125463

Add the following 2 rules to your leftWrapper div:

display:flex;justify-content: center;

<div id="leftwrapper" style="width:590px;display:flex;justify-content: center; float:left; background-color:grey; overflow-y:auto; height:650px;">

FIDDLE

Upvotes: 1

Tieson T.
Tieson T.

Reputation: 21191

Not entirely sure that this meets you needs, but a simple margin rule on the table seems to do it (http://jsfiddle.net/tiesont/ujxh0mjj/1/):

#leftwrapper table
{
    margin: auto;
}

Upvotes: 2

Carol McKay
Carol McKay

Reputation: 2424

apply the css to your outer div:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: - as per required;

Upvotes: 0

Related Questions