CODEWITHSUNDEEP
htmlcss
Jim B
Jim B

Reputation: 8574

Centering a div between multiple floating divs

Apologies if this is a duplicate; but i wasn't able to find quite what I was looking for.

I have a container div; with 1 div within it set to float left; and can have either 1 or 2 other divs set to float right. All these divs can be of varying width.

What i'm looking to do is have my centered div always be centered within the containing div; regardless of the floating divs.

I've tried varying combinations of setting the width to auto, margins to auto, text-align to center, etc. but haven't gotten quite there yet.

Can anyone point me in the right direction?

EDIT: jsfiddle here: https://jsfiddle.net/1rn9t5yk/

<div>
<div style="float: left">LEFT</div>
<div style="float: right">RIGHT</div>
<div style="float: right">RIGHT2</div>
<div style="text-align: center; margin:0 auto">CENTER</div>
</div>

So given the above; what i want to happen is for the center div to not shift position depending on whether there are 1 or 2 float right divs. If you remove one and re-run; you can see the position shift

Upvotes: 0

Views: 41

Answers (1)

osjo
osjo

Reputation: 131

If You want to center div inside wrapping div without taking care to another elements inside wrapper, You can use absolute positioning

https://jsfiddle.net/t6z9wgxv/

<div>
<div style="float: left">LEFT</div>
<div style="float: right">RIGHT</div>
<div style="float: right">RIGHT2</div>
<div style="position: absolute; left: 0; right: 0; text-align: center;">CENTER</div>
</div>

Upvotes: 1

Related Questions