I want to have 3 divs aligned inside a container div, something like this:
[[LEFT] [CENTER] [RIGHT]]
Container div is 100% wide (no set width), and center div should remain in center after resizing the container.
So I set:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
But it becomes:
[[LEFT] [CENTER] ]
[RIGHT]
Any tips?
With that CSS, put your divs like so (floats first):
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.
P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.
Aligning Three Divs Horizontally Using Flexbox
Here is a CSS3 method for aligning divs horizontally inside another div.
#container {
display: flex; /* establish flex container */
flex-direction: row; /* default value; can be omitted */
flex-wrap: nowrap; /* default value; can be omitted */
justify-content: space-between; /* switched from default (flex-start, see below) */
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
jsFiddle
The justify-content property takes five values:
flex-start (default)
flex-end
center
space-between
space-around
In all cases, the three divs are on the same line. For a description of each value see: https://stackoverflow.com/a/33856609/3597276
Benefits of flexbox:
minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts,
flexbox is a modern (CSS3) technique with a broad range of options.
To learn more about flexbox visit:
Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
If you do not want to change your HTML structure you can also do by adding text-align: center; to the wrapper element and a display: inline-block; to the centered element.
#container {
width:100%;
text-align:center;
}
#left {
float:left;
width:100px;
}
#center {
display: inline-block;
margin:0 auto;
width:100px;
}
#right {
float:right;
width:100px;
}
Live Demo: http://jsfiddle.net/CH9K8/
Float property is actually not used to align the text.
This property is used to add element to either right or left or center.
div > div { border: 1px solid black;}
<html>
<div>
<div style="float:left">First</div>
<div style="float:left">Second</div>
<div style="float:left">Third</div>
<div style="float:right">First</div>
<div style="float:right">Second</div>
<div style="float:right">Third</div>
</div>
</html>
for float:left output will be [First][second][Third]
for float:right output will be [Third][Second][First]
That means float => left property will add your next element to left of previous one, Same case with right
Also you have to Consider the width of parent element, if the sum of widths of child elements exceed the width of parent element then the next element will be added at next line
<html>
<div style="width:100%">
<div style="float:left;width:50%">First</div>
<div style="float:left;width:50%">Second</div>
<div style="float:left;width:50%">Third</div>
</div>
</html>
[First] [Second]
[Third]
So you need to Consider All these aspect to get the perfect result
There are several tricks available for aligning the elements.
01. Using Table Trick
.container{
display:table;
}
.left{
background:green;
display:table-cell;
width:33.33vw;
}
.center{
background:gold;
display:table-cell;
width:33.33vw;
}
.right{
background:gray;
display:table-cell;
width:33.33vw;
}
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
02. Using Flex Trick
.container{
display:flex;
justify-content: center;
align-items: center;
}
.left{
background:green;
width:33.33vw;
}
.center{
background:gold;
width:33.33vw;
}
.right{
background:gray;
width:33.33vw;
}
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
03. Using Float Trick
.left{
background:green;
width:100px;
float:left;
}
.center{
background:gold;
width:100px;
float:left;
}
.right{
background:gray;
width:100px;
float:left;
}
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
I like my bars tight and dynamic. This is for CSS 3 & HTML 5
First, setting the Width to 100px is limiting. Don't do it.
Second, setting the container's width to 100% will work ok, until were talking about it being a header/footer bar for the whole app, like a navigation or credits/copyright bar. Use right: 0; instead for that scenario.
You are using id's (hash #container, #left, etc) instead of classes (.container, .left, etc), which is fine, unless you want to repeat your style pattern elsewhere in your code. I'd consider using classes instead.
For HTML, no need to swap order for: left, center, & right. display: inline-block; fixes this, returning your code to something cleaner and logically in order again.
Lastly, you need to clear the floats all up so that it doesn't mess with future <div>. You do this with the clear: both;
To summarize:
HTML:
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
CSS:
.container {right: 0; text-align: center;}
.container .left, .container .center, .container .right { display: inline-block; }
.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }
Bonus point if using HAML and SASS ;)
HAML:
.container
.left
.center
.right
.clear
SASS:
.container {
right: 0;
text-align: center;
.left, .center, .right { display: inline-block; }
.left { float: left; }
.center { margin: 0 auto; }
.right { float: right; }
.clear { clear: both; }
}
This can be easily done using the CSS3 Flexbox, a feature which will be used in the future(When <IE9 is completely dead) by almost every browser.
Check the Browser Compatibility Table
HTML
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
CSS
.container {
display: flex;
flex-flow: row nowrap; /* Align on the same line */
justify-content: space-between; /* Equal margin between the child elements */
}
Output:
.container {
display: flex;
flex-flow: row nowrap; /* Align on the same line */
justify-content: space-between; /* Equal margin between the child elements */
}
/* For Presentation, not needed */
.container > div {
background: #5F85DB;
padding: 5px;
color: #fff;
font-weight: bold;
font-family: Tahoma;
}
<div class="container">
<div class="left">
Left
</div>
<div class="center">
Center
</div>
<div class="right">
Right
</div>
</div>
With twitter bootstrap :
<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
possible answer, if you want to keep the order of the html and not use flex.
HTML
<div class="a">
<div class="c">
the
</div>
<div class="c e">
jai ho
</div>
<div class="c d">
watsup
</div>
</div>
CSS
.a {
width: 500px;
margin: 0 auto;
border: 1px solid red;
position: relative;
display: table;
}
.c {
display: table-cell;
width:33%;
}
.d {
text-align: right;
}
.e {
position: absolute;
left: 50%;
display: inline;
width: auto;
transform: translateX(-50%);
}
Code Pen Link
CSS grid can do the job easily:
#container {
display: grid; /* (1) a grid container */
grid-auto-flow:column; /* (2) column layout */
justify-content: space-between; /* (3) align the columns*/
background-color: lightyellow;
}
#container > div {
width: 100px;
height: 100px;
border: 2px dashed red;
}
<div id="container">
<div></div>
<div></div>
<div></div>
</div>
HTML:
<div id="container" class="blog-pager">
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS:
#container{width:98%; }
#left{float:left;}
#center{text-align:center;}
#right{float:right;}
text-align:center; gives perfect centre align.
JSFiddle Demo
I did another attempt to simplify this and achieve it without the necessity of a container.
HTML
<div class="box1">left side of the page</div>
<div class="box2">right side of the page</div>
<div class="box3">center of the page </div>
CSS
.box1 {
background-color: #ff0000;
width: 200px;
float: left;
}
.box2 {
background-color: #00ff00;
width: 200px;
float: right;
}
.box3 {
background-color: #0fffff;
width: 200px;
margin: 0 auto;
}
You can see it live at JSFiddle
Using Bootstrap 3 I create 3 divs of equal width (in 12 column layout 4 columns for each div).
This way you can keep your central zone centered even if left/right sections have different widths (if they don't overflow their columns' space).
HTML:
<div id="container">
<div id="left" class="col col-xs-4 text-left">Left</div>
<div id="center" class="col col-xs-4 text-center">Center</div>
<div id="right" class="col col-xs-4 text-right">Right</div>
</div>
CSS:
#container {
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
height: 100px;
}
.col {
border: 1px solid #07f;
padding: 0;
}
CodePen
To create that structure without libraries I copied some rules from Bootstrap CSS.
HTML:
<div id="container">
<div id="left" class="col">Left</div>
<div id="center" class="col">Center</div>
<div id="right" class="col">Right</div>
</div>
CSS:
* {
box-sizing: border-box;
}
#container {
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
height: 100px;
}
.col {
float: left;
width: 33.33333333%;
border: 1px solid #07f;
padding: 0;
}
#left {
text-align: left;
}
#center {
text-align: center;
}
#right {
text-align: right;
}
CopePen
If the left, center, and right DIVs have different widths, you can accomplish this as follows:
#container {
position: relative;
width: 100%;
text-align: center;
}
#left {
position: absolute;
left: 0px;
}
#right {
position: absolute;
right: 0px;
}
#center {
display: inline-block;
}
If your center DIV is text, you don't need the #center CSS.
Here are the changes that I had to make to the accepted answer when I did this with an image as the centre element:
Make sure the image is enclosed within a div (#center in this case). If it isn't, you'll have to set display to block, and it seems to centre relative to the space between the floated elements.
Make sure to set the size of both the image and its container:
#center {
margin: 0 auto;
}
#center, #center > img {
width: 100px;
height: auto;
}
You can try this:
Your html code like this:
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
and your css code like this:
#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
so, it's output should be get like this:
[[LEFT] [CENTER] [RIGHT]]
Use CSS Grid
layout {
display: grid;
grid-template-columns: repeat(3,1fr);
}
start-column {
justify-self: start;
}
center-column {
justify-self: center;
}
end-column {
justify-self: end;
}
<layout>
<start-column>
<button>Start</button>
</start-column>
<center-column>
<p>Center Donec non urna ipsum. Nullam euismod, lacus ac malesuada varius, mauris erat ullamcorper erat, eget dignissim tortor felis et sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi faucibus turpis et augue dapibus bibendum.</p>
</center-column>
<end-column>
End
</end-column>
</layout>
.processList
text-align: center
li
.leftProcess
float: left
.centerProcess
float: none
display: inline-block
.rightProcess
float: right
html
ul.processList.clearfix
li.leftProcess
li.centerProcess
li.rightProcess
You've done it correctly, you only need to clear your floats.
Simply add
overflow: auto;
to your container class.
The easiest solution is to crate a table with 3 columns and center that table.
html:
<div id="cont">
<table class="aa">
<tr>
<td>
<div id="left">
<h3 class="hh">Content1</h3>
</div>
</td>
<td>
<div id="center">
<h3 class="hh">Content2</h3>
</div>
</td>
<td>
<div id="right"><h3 class="hh">Content3</h3>
</div>
</td>
</tr>
</table>
</div>
css:
#cont
{
margin: 0px auto;
padding: 10px 10px;
}
#left
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
#center
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
#right
{
width: 200px;
height: 160px;
border: 5px solid #fff;
}
#warpcontainer {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
So I've been struggling with this for some while and the motive is just to learn but I simply want to center two <h2> titles next to each other. Preferably wrapping them in some sort of a container so that I simply can apply margin: 0 auto; Like:
<div>
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
Here, check the snippet. You'll get both h2 centered.
.container{
text-align:center;
}
h2{
text-align:left;
display:inline-block;
}
<div class="container">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
A little different approach than Xahed, but working just as good
DEMO HERE:
http://jsfiddle.net/s0y9pg0L/
.container {
margin: 0 auto;
width:250px;
border: 1px solid red;
}
.centered-text {
text-align: center;
}
h2 {
display: inline-block;
}
with HTML
<div class="container">
<div class="centered-text">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
</div>
This is a little more proof if you're actually gonna use it in a website.
Simplest version I can think of is, very similar to the other ones posted (sorry).
If you do not want to affect all other h2s in the page, give the specific ones a class
h2{
display: inline-block;
}
.wrapper{
text-align: center;
}
<div class="wrapper">
<h2>Hello!</h2>
<h2>Hello!</h2>
</div>
Here, I hope this helps. I think this is what you meant by center two h2 titles next to each other.
#wrapper {
width: 500px;
overflow: hidden;
border: 1px solid black;
margin: 0 auto
}
#title1 {
float:left;
width: 249px;
margin: 0 auto;
text-align: center;
}
#title2 {
overflow: hidden;
width: 249px;
text-align: center;
}
<div id="wrapper">
<div id="title1"><h2>Hello!</h2></div>
<div id="title2"><h2>Hello!</h2></div>
</div>
I'm having weird CSS issue.
This jsfiddle shows it well.
HTML:
<div class="container" style="text-align: left;">
<div class="leftBox">
<div class="innerWrapper" style="background: gray;">Left</div>
</div>
<div class="rightBox">
<div class="innerWrapper" style="background: green;">Right</div>
</div>
</div>
<div class="container" style="text-align:center; background:red; ">Weird</div>
CSS:
.container {
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
I don't understand why the lower div consumes the margin between the upper ones.
I expected it to consume only the "row" below the upper two columns.
Tried several different positioning and "voodos" but nothing helped.
Any idea?
Thanks.
You need to clear the element you want on it's own line, see fiddle: http://jsfiddle.net/JT5HL/1/
or CSS:
.container {
clear: both;
width: 640px;
margin: 0 auto;
}
.leftBox {
width: 340px;
float: left;
}
.rightBox {
width: 300px;
float: left;
}
.innerWrapper {
width: 300px;
}
Either give "clear:both" property to your ".container" class which is the older method.
SEE Fiddle: *http://jsfiddle.net/KjtJu/1/*
Or use the new solution "overflow: hidden;" property to your ".container" class
See fiddle: http://jsfiddle.net/8M3L9/1/
Use <div class="clear"></div> in your html inside the container div
Use .clear{clear:both;} in your css.
HTML:
<div class="container" style="text-align: left;">
...
<div class="clear"></div>
</div>
CSS:
.clear{clear:both;}
DEMO
You can change your innerWrapper to 100%;
.innerWrapper {
width: 100%;
}
This seems to work.
http://jsfiddle.net/JT5HL/4/
<div class="container" style="text-align:center; background:red; clear:both; ">Weird</div>
Why not just close the gap in between the left and right by making width: 320px;?
See Fiddle :http://jsfiddle.net/JT5HL/7/
Or you could add a height to the container like this height: 20px; this will get rid of the red in the space.
See Fiddle : http://jsfiddle.net/JT5HL/8/
I have a square <div> (70px x 70px) which will contain an image of a variable dimensions(Square, landscape or potrait). I want this image to be symmetrically centered inside the <div>. how do I get it..?
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
The actual size of the image can be greater than 70px x 70px. But it should fit symmetrically in the center.
I also have to make it cross-browser compatible..
Help Appreciated...
Must it be an <img> element?
You can set the image as background of the <div> with background-position:center center - this is very easy to do, not using javascript and cross-browser..
Use it like this:
<div class="img-polaroid" style="width: 70px; height: 70px; background:url('.base_url("images/store/images/".$image->image).') center center no-repeat black; text-align:center;"></div>
Check this Working jsFiddle. In terms of browser support I've never come across a browser that doesn't support this.
It is sure to work on:
Netscape 6+
Mozilla 1+
Firefox 1+
Internet Explorer 4+
Opera 3+
Safari 1+
This will do the trick for u
.img-polaroid img{display:block; margin:0 auto;}
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
should be
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black;display:table-cell;vertical-align:middle;text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
add display:table-cell;vertical-align:middle;
Use display: table-cell; for your div with your text-align: center; and vertical-align: middle;
Below is the code:
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; border: 1px solid yellow; text-align:center; vertical-align: middle; display: table-cell;">
<image src="http://www.gelifesciences.com/gehcls_images/GELS/Link%20Images/Product%20Link%20Images/ImageScanner%20III%2050x50.jpg" />
</div>
and here is the example: http://jsfiddle.net/eUGb6/
Here you can find more about compatibility issues:
vertical-align text-align display
It's very simple to do it vertically/horizontally alignment.
First build a holder div:
.holder {
display: table;
}
Then build a container div:
.container {
display: table-cell;
vertical-align: middle;
text-align: center
}
And in your container, it would be shown everything centered.
I didn't test it yet.. but should work ;p
<div class="holder">
<div class="container">
<img src="YOURIMAGE" />
</div>
</div>
Its easy :)
.img-polaroid {
display:table-cell;
vertical-align: middle
}
check fiddle http://jsfiddle.net/9hppL/2/
You can use the display:inline-block and :after for div, like this:
div {
width: 70px;
height: 70px;
text-align: center;
border: 1px solid green;
}
div:after {
content:"";
display: inline-block;
width:0;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
Please view the demo.Click here, you can look at other solutions.
This is your ultimate guide to centering things in CSS> http://www.w3.org/Style/Examples/007/center
Here is a working jsfiddle: http://jsfiddle.net/9hppL/
.img-polaroid {
display: table-cell;
vertical-align: middle
}
#image {
background: blue;
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
}
How to use div+css make three columns in html.
left and right columns width:auto, and middle one need width:990px(should be in the center) and they are height:100%.
HTML
<div style=" float:left; width:auto; height: 100%;background-color:#006;">Area1</div>
<div style=" float:left; width:990px; height: 100%;">Area2</div>
<div style=" float:left; width:auto; height: 100%;background-color:#006633;">Area3</div>
For this type of functionality you can use display:table property for this. Like this:
html,body{height:100%;}
div{
display:table-cell;
height:100%;
vertical-align:top;
}
Check this http://jsfiddle.net/K5H4e/
But it's not work till IE7 & below.
this will be easier using a table with three column .
general you shoud use something like this: Example on js-fiddle.
<div style="float:left; background-color:#006;" >Area1</div>
<div style="float:right; background-color:#006633;">Area3</div>
<div style="border:1px solid red;overflow:auto;" >Area2</div>
Note: You won't get the height of the rows align that easily, since they are independent elements.
EDIT:
in order to have the height:100%work on your divs, you need the following:
html, body {
margin: 0;
padding: 0;
height: 100%; /* important! */
}
div {
min-height: 100%;
}
EDIT2: updated fiddle
<div class="Division"><p>First Division</p></div>
<div class="Division"><p>Second Division</p></div>
<div class="Division"><p>Third Division</p></div>
.Division{
float: left;
width: 100px;
height: 200px;
border: 2px solid #000000;
margin-left: 10px;
}
How about this: jsfiddle
<div style="width:auto; height: 100%;background-color:#006;
display: inline">Area</div>
<div style="width:990px; height: 100%; display: inline">Area2</div>
<div style="width:auto; height: 100%;background-color:#006633;
display:inline">Area3</div>