Best IT Recipes

Center a div between the one that floated on the right and the one that floated on the left

I have a page in which the title consists of three divs - one that moves to the left, one that moves to the right, and one that is between them. I would like the central center center to be centered, but unfortunately float: center does not exist, and I cannot just put it to the left and add padding, as this should change depending on the size of the window.

Is there something simple that I don't notice? Or how can I do this?

Update:
Also, I would like to find a way to center this middle div in the space between divs , if that looks better.

+43
html css center
Jul 03 '10 at 20:11
source share
7 answers

If you have two floating divs, you know the fields. The problem is that the float:right div should be placed in front of the middle div. So basically you will have:

left-floated | rightful | in the center

Now about borders: usually you can just use margin:0 auto , right? The problem is that right now you know the values ​​of the fields: floating divs! So you just need to use:

margin:0 right-floated-width 0 left-floated-width

That should work.

Through the years of editing

Meanwhile, a new toy appeared in the city: flexbox. Support is pretty good (i.e. if you don't need support below IE 10), and ease of use is above a floating point.

Here you can see a very good flexbox guide here . The example you need is here .

+51
Jul 03 '10 at 20:17
source share

Indeed, the important part is that the centered div appears after the left and right divs in the markup. Check out this example, it uses margin-left: auto and margin-right: auto in a centered div, which causes it to center.

 <html> <head> <style type="text/css"> #left { float: left; border: solid 1px red; } #mid { margin-left: auto; margin-right: auto; border: solid 1px red; } #right { float: right; border: solid 1px red; } </style> </head> <body> <div id="left"> left </div> <div id="right"> right </div> <div id="mid"> mid </div> </body> </html>

Here's the JS Bin to check: http://jsbin.com/agewes/1/edit

+39
Jul 03 '10 at 20:27
source share

An element with centered content should be specified after both moving elements. After that, just set the middle element to text-align: center . The text in the centered element will be compressed between the floats.

See here: http://jsfiddle.net/calvintennant/wjjeR/

+4
Aug 22 '13 at 19:03
source share

You can usually use flexbox instead of floats:

https://jsfiddle.net/h0zaf4Lp/

HTML:

 <div class="container"> <div>left</div> <div class="center">center</div> <div>right</div> </div>

CSS

 .container { display: flex; } .center { flex-grow: 1; }
+4
Aug 6 '16 at 7:57
source share

Try this (remember to use the best class names):

 .left { float:left; width:200px; } .right{ float:right; width:200px; } .center { overflow:hidden; zoom:1; }

The center div will be located between the two floats.

If you want to create a gutter between this centered div and two floats, then use margin on the floats, and not on the center div.

Because of the “scaling”, CSS will not be validated, but this layout will work in IE 5.5 and 6.

Note that the source order is important here: two floats must be first, and then your "centered" div.

+2
Jul 04 '10 at 5:30
source share

In some cases, you have a limitation and cannot change the layout of the page by moving the middle div after the right float div. In this case, follow these instructions:

  • For container: position: relative
  • For the middle div: position: absolute; left: [containerWidth - middle-width / 2] position: absolute; left: [containerWidth - middle-width / 2]

Hope you have an idea.

0
Oct 14 '13 at 13:41
source share

A simple solution without having to change the order of the div (sometimes we cannot do this) can be an absolute positioning for the center of the div as follows:

 .container { position: relative; } .container div { width: 200px; background: red; } .left { float: left; } .right { float: right; } .center { position: absolute; top: 0; left: 0; right: 0; margin: auto; } 
 <div class="container"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div>
https://jsfiddle.net/Helioz/nj548y0g/
-one
Sep 16 '16 at 10:40
source share


More articles:


All Articles