For my class I have to have 3 divs floated left in a row with the outer two half the size of the middle one. It's driving me crazy that the rows aren't centered on the page. Is there a way to center them without getting rid of the float?
I tried creating a container div with text-align just as a shot in the dark but that didn't work. All other research I've seen is to change the float to display but I have to use float so I can't do that.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.cover {
width: 20%;
}
div.author {
width: 50%;
font-family: calibri;
}
div.links {
width: 20%;
}
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<p class="link" onclick="parent.open('https://www.britannica.com/biography/Veronica-Roth')">
https://www.britannica.com/biography/Veronica-Roth
</p>
</li>
</ul>
</div>
Your instinct to wrap the 3 "columns" in a container div is correct. This allows you to use what is commonly referred to as the "clearfix" trick. Items that are "floated" are ignored by the normal box flow of the page which is why the container seems to collapse and ignore your floating contents.
Frustrating indeed!
This is the "clearfix":
div.container:after {
content: ''; /* no content in this pseudo element */
display: table; /* be 100% wide */
clear: both; /* clear the previous floats */
}
The :after pseudo selector on the container is the same thing as putting an empty div as the last item in the container. By clearing the floats, the container will wrap around the floating items.
This is a hack... but it works! The entire web development community has used this to "fix" the difficulties inherent with using floats for years to create layouts before the advent of real layout systems like Flexbox and CSS Grid.
After the container clears the floating items inside, just set the widths so that they add up to 100% and you are good.
div.container {
width: 100%;
text-align: center;
border: none;
background-color: pink;
height: 100%;
}
div.container:after {
content: '';
display: table;
clear: both;
}
div.cover {
width: 25%;
float: left;
}
div.author {
width: 50%;
font-family: calibri;
float: left;
}
div.links {
width: 25%;
float: left;
}
<div class="container">
<div class="cover">
<p class="inner">
<img src="Images/Divergent.jpg"><br>
</p>
</div>
<div class="author">
<p class="inner" style="margin-top: 10px;">
<b>Divergent<br>Veronica Roth</b><br>
</p>
</div>
<div class="links">
<ul>
<li>
<a href="https://www.britannica.com/biography/Veronica-Roth">
Veronica-Roth
</a>
</li>
</ul>
</div>
</div>
div.container position:relative;
div.cover float:left;
div.autor put inside tag align="center"
div.links float:right;
or
div.autor margin:5%;
or
display:inline-block;
or you can use text-align:center; in css on the parent div and then display:inline-block; on each div inside the parent div
Im trying to use margin: auto; at the same time as i'm using the display: inline-block; css. Before i'm putting in the inline-block code it worked fine and the div was centered using margin auto. But now its not working anymore.
I want the Divs logo and contact_info to be inline and the div .inner to be centered.
.inner {
width: 80%;
display: inline-block;
margin: auto;
padding-top: 40px;
padding-bottom: 40px;
}
.logo {
float: left;
}
.contact_info {
float: right;
}
HTML CODE
<div class="inner"> <!-- Top header -->
<div class="logo">
Logga här
</div>
<div class="contact_info">
<h4> Vikbo Bil & Motor AB </h4>
<p> Ekkällavägen 6 </p>
<p> 610 24 Vikbolandet </p>
<p> 0125 500 71 </p>
</div>
</div>
Remove inline-block from .inner class.
display: inline-block;
makes an element well..inline. meaning it only takes as much space as it's width, and allows other inline elements to take the remaining space in the page if they can fit in.
what you want, is to create the .inner div a block element, which, even though there might be extra space after the div has taken the space for it's own width, won't let any other element take up that space. meaning, it'll be the only element in that row.
so you can use margin: auto to make it center.
I see you've used float placement on logo and contact_info meaning they'll not be fitting in the div.inner. you should use display: inline-block on these divs, so they inline and inside the div.inner.
see if this fiddle satisfies all your needs?
Just remove the inline-block property on your "inner" div :
.inner {
width: 80%;
margin: auto;
padding-top: 0;
padding-bottom: 40px;
background: blue;
}
.logo {
float: left;
background: red;
}
.contact_info {
float: right;
background: green;
}
<div class="container">
<div class="logo">logo</div>
<div class="contact_info">contact_info</div>
<div class="inner">inner</div>
</div>
You can do problem solve using this code
.inner{
width:100%
margin:0 auto;
display: block;
height: 100px;
}
.logo{
display:inline-block;
width:auto;
}
.contact_info{
display:inline-block;
width:auto;
}
I am trying to centre the middle circle but I am unable even when set to margin: 0 auto; and display: inline-block; or display table. Any suggestions?
JSFiddle
HTML
<div id="intro">
<p class="body">As part of Science World’s Cycle Safe Initiative we have installed sensors at each of our gates. In the past year we have had over <b>300,000</b> people ride along. Some information we gathered for June included;</p>
<span class="blue circle">
<h3>2 - 3PM</h3>
<p>is the busiest hour</p>
</span>
<span class="green circle">
<h3>117,295</h3>
<p>riders this month</p>
</span>
<span class="navy circle">
<h3>10%</h3>
<p>of Vancouverites*</p>
</span>
</div>
CSS
#intro {
max-width: 1080px;
margin: 0 auto;
}
#intro .circle {
min-width: 230px;
min-height: 230px;
display: inline-block;
text-align: center;
border-radius: 1000px;
color: white;
margin: 60px 0;
}
#intro .circle h3 {
margin-top: 80px;
margin-bottom: 0;
font-size: 2.2em;
}
#intro .circle p {
margin-top: 0;
}
#intro .circle.blue {
background: #0079c8;
}
#intro .circle.green {
background: #2ecc71;
}
#intro .circle.navy {
background: #34495e;
float: right;
}
Add text-align:center to the #intro (as your inner content acts like inline) and add float:left to your #intro .circle.blue.
Example
Only block-level elements can be centered with margin:0 auto.
You can probably achieve the effect you want in other ways, though.
See this updated version of your jsfiddle for a solution via adding the following CSS to your middle circle:
position:absolute;
left:50%;
margin:-115px;
(Note that the negative margin-left must be equal to half the element's width to make it appear centered using this solution.)
I have updated your code: http://jsfiddle.net/h9HGG/6/
The trick is to put each circle centered inside a div which is set to "display:table-cell". Then wrap all the circle inside a container which is set to "display:table".
example:
<div class="wrapper"> <!--display: table, width: 100%, table-layout: fixed -->
<div class="circle-container"> <!--display: table-cell, text-align: center -->
<!--circle 1-->
</div>
<div class="circle-container"> <!--display: table-cell, text-align: center -->
<!--circle 2-->
</div>
<div class="circle-container"> <!--display: table-cell, text-align: center -->
<!--circle 3-->
</div>
</div>
I'm not sure this is going to work for you - FIDDLE
I put the circles in divs, floated them left, align: center, and gave each one a width of 33%.
They are flexible, and even overlap when the screen is moved horizontally (not sure if that works for you).
CSS
.centerme {
float: left;
width: 33%;
text-align: center;
}
UPDATE: The answers have got me close, but they still don't align vertically as the text div is larger, how can I make them both the same height and therefore align?
I would like to have two DIVs next to each other, one containing an image and one containing text, both sitting in a container DIV.
The image should be 15% of the width of the container div, with the text using the remaining 85%
The image and text should be aligned vertically within their respective DIVs, so it looks like they are aligned with each other.
I've tried to work this out but can't seem to do it! Can anyone help?
#picture {
float: left;
width: 15%;
line-height: auto;
}
#text {
width: auto;
padding-left: 16%;
line-height: auto;
vertical-align: middle;
margin-top: auto;
margin-bottom: auto;
}
#text p {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
and
<div id="quotes">
<div id="picture">
<img style="width: 100%; vertical-align: middle" src="tom.jpg" >
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Here's a fiddle with your code in it: http://jsfiddle.net/hQ6Vw/1/
The only changes I made was to assign matching top/bottom margins to the img and p tags. I think that will give you the effect you're looking for.
If you use float and verticl-align, those two won'nt work together.
Float extract itself from regular flow and go slide on one side or the other on top of next line right after any content within the regular flow.
Vertical-align works:
in betweem inline-boxes (inline-block-level element or displayed so with display:inline-block;)
inside td or it's CSS default display : display:table-cell;
here jsfiddle #TXChetG updated
Using display:inline-block; http://jsfiddle.net/GCyrillus/hQ6Vw/2/
Using display:table/* table-cell*/;
http://jsfiddle.net/GCyrillus/hQ6Vw/3/
This should get you close:
<div>
<div style="background: grey; width: 15%; float:left"></div>
<div style="background: blue; width: 85%; float:left"></div>
</div>
Replace the grey background div with your image and the blue with your text.
Check this out
HTML:
<section>
<div id="one"></div>
<div id="two"></div>
</section>
CSS:
section {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
div#one {
width: 15%;
height: 200px;
background: red;
float: left;
}
div#two {
margin-left: 15%;
height: 200px;
background: black;
}
Is this what you mean?
html
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
<div class="container">
<div class="images">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:black">
</div>
<div class="text">
Example
</div>
</div>
css
.container {
clear: both;
}
.images {
width: 15%;
float: left;
vertical-align: text-top;
}
.text {
width: 85%;
float: right;
vertical-align:text-top;
}
Why not just set the #text p display to display: inline or display:block; or use margins to align them?
<div id="quotes">
<div id="picture">
<img src="tom.jpg" />
</div>
<div id="text">
<p>"Christiaan was one of the stand out candidates throughout, therefore there was no hesitation in offering him a place on this highly sort after scheme..."</p>
</div>
</div>
Display the container div as table and the text and image divs as table-cell to make them the same heights. You can then centre the image vertically through vertical-align:middle.
#quotes {
display:table;
}
#picture {
width: 15%;
display:table-cell;
vertical-align: middle;
}
#text {
display:table-cell;
width:85%;
padding-left: 16%;
}
#picture img {
width: 100%;
}
http://jsfiddle.net/X3WsV/1/
I have a problem when I try to center the div block "products" because I don't know in advance the div width. Anybody have a solution?
Update: The problem I have is I don't know how many products I'll display, I can have 1, 2 or 3 products, I can center them if it was a fixed number as I'd know the width of the parent div, I just don't know how to do it when the content is dynamic.
.product_container {
text-align: center;
height: 150px;
}
.products {
height: 140px;
text-align: center;
margin: 0 auto;
clear: ccc both;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="products" id="products">
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
</div>
Update 27 Feb 2015: My original answer keeps getting voted up, but now I normally use #bobince's approach instead.
.child { /* This is the item to center... */
display: inline-block;
}
.parent { /* ...and this is its parent container. */
text-align: center;
}
My original post for historical purposes:
You might want to try this approach.
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"/>
</div>
Here's the matching style:
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
.clear {
clear: both;
}
JSFiddle
The idea here is that you contain the content you want to center in two divs, an outer one and an inner one. You float both divs so that their widths automatically shrink to fit your content. Next, you relatively position the outer div with it's right edge in the center of the container. Lastly, you relatively position the inner div the opposite direction by half of its own width (actually the outer div's width, but they are the same). Ultimately that centers the content in whatever container it's in.
You may need that empty div at the end if you depend on your "product" content to size the height for the "product_container".
An element with ‘display: block’ (as div is by default) has a width determined by the width of its container. You can't make a block's width dependent on the width of its contents (shrink-to-fit).
(Except for blocks that are ‘float: left/right’ in CSS 2.1, but that's no use for centering.)
You could set the ‘display’ property to ‘inline-block’ to turn a block into a shrink-to-fit object that can be controlled by its parent's text-align property, but browser support is spotty. You can mostly get away with it by using hacks (eg. see -moz-inline-stack) if you want to go that way.
The other way to go is tables. This can be necessary when you have columns whose width really can't be known in advance. I can't really tell what you're trying to do from the example code — there's nothing obvious in there that would need a shrink-to-fit block — but a list of products could possibly be considered tabular.
[PS. never use ‘pt’ for font sizes on the web. ‘px’ is more reliable if you really need fixed size text, otherwise relative units like ‘%’ are better. And “clear: ccc both” — a typo?]
.center{
text-align:center;
}
.center > div{ /* N.B. child combinators don't work in IE6 or less */
display:inline-block;
}
JSFiddle
Most browsers support the display: table; CSS rule. This is a good trick to center a div in a container without adding extra HTML nor applying constraining styles to the container (like text-align: center; which would center all other inline content in the container), while keeping dynamic width for the contained div:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.centered { display: table; margin: 0 auto; }
.container {
background-color: green;
}
.centered {
display: table;
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
Update (2015-03-09):
The proper way to do this today is actually to use flexbox rules. Browser support is a little bit more restricted (CSS table support vs flexbox support) but this method also allows many other things, and is a dedicated CSS rule for this type of behavior:
HTML:
<div class="container">
<div class="centered">This content is centered</div>
</div>
CSS:
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }
.container {
display: flex;
flex-direction: column; /* put this if you want to stack elements vertically */
background-color: green;
}
.centered {
margin: 0 auto;
background-color: red;
}
<div class="container">
<div class="centered">This content is centered</div>
</div>
six ways to skin that cat:
Button one: anything of type display: block will assume the full parents width. (unless combined with float or a display: flex parent). True. Bad example.
Button 2: going for display: inline-block will lead to automatic (rather than full) width. You can then center using text-align: center on the wrapping block. Probably the easiest, and most widely compatible, even with ‘vintage’ browsers...
.wrapTwo
text-align: center;
.two
display: inline-block; // instantly shrinks width
Button 3:
No need to put anything on the wrap. So perhaps this is the most elegant solution. Also works vertically. (Browser support for transtlate is good enough (≥IE9) these days...).
position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);
Btw: Also a great way for vertically centering blocks of unknown height (in connection with absolute positioning).
Button 4:
Absolute positioning. Just make sure to reserve enough height in the wrapper, since noone else will (neither clearfix nor implicit...)
.four
position absolute
top 0
left 50%
transform translateX(-50%)
.wrapFour
position relative // otherwise, absolute positioning will be relative to page!
height 50px // ensure height
background lightgreen // just a marker
Button 5:
float (which brings also block-level elements to dynamic width) and a relative shift. Although I've never seen this in the wild. Perhaps there are disadvantages...
.wrapFive
&:after // aka 'clearfix'
content ''
display table
clear both
.five
float left
position relative
left 50%
transform translateX(-50%)
Update: Button 6:
And nowadays, you could also use flex-box. Note, that styles apply to the wrapper of the centered object.
.wrapSix
display: flex
justify-content: center
→ full source code (stylus syntax)
I found a more elegant solution, combining "inline-block" to avoid using float and the hacky clear:both. It still requires nested divs tho, which isnt very semantic but it just works...
div.outer{
display:inline-block;
position:relative;
left:50%;
}
div.inner{
position:relative;
left:-50%;
}
Hope it helps!
<div class="outer">
<div class="target">
<div class="filler">
</div>
</div>
</div>
.outer{
width:100%;
height: 100px;
}
.target{
position: absolute;
width: auto;
height: 100px;
left: 50%;
transform: translateX(-50%);
}
.filler{
position:relative;
width:150px;
height:20px;
}
If the target element is absolutely positioned, you can center it by moving it 50% in one direction (left: 50%) and then transforming it 50% in the opposition direction (transform:translateX(-50%)). This works without defining the target element's width (or with width:auto). The parent element's position can be static, absolute, relative, or fixed.
By default, div elements are displayed as block elements, so they have 100% width, making centering them meaningless. As suggested by Arief, you must specify a width and you can then use auto when specifying margin in order to center a div.
Alternatively, you could also force display: inline, but then you'd have something that pretty much behaves like a span instead of a div, so that doesn't make a lot of sense.
This will center an element such as an Ordered List, or Unordered List, or any element.
Just wrap it with a Div with the class of outerElement and give the inner element the class of innerElement.
The outerelement class accounts for IE, old Mozilla, and most newer browsers.
.outerElement {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
position: relative;
left: 50%;
}
.innerElement {
position: relative;
left: -50%;
}
use css3 flexbox with justify-content:center;
<div class="row">
<div class="col" style="background:red;">content1</div>
<div class="col" style="">content2</div>
</div>
.row {
display: flex; /* equal height of the children */
height:100px;
border:1px solid red;
width: 400px;
justify-content:center;
}
Slight variation on Mike M. Lin's answer
If you add overflow: auto; ( or hidden ) to div.product_container, then you don't need div.clear.
This is derived from this article -> http://www.quirksmode.org/css/clearing.html
Here is modified HTML:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
</div>
And here is modified CSS:
.product_container {
overflow: auto;
/* width property only required if you want to support IE6 */
width: 100%;
}
.outer-center {
float: right;
right: 50%;
position: relative;
}
.inner-center {
float: right;
right: -50%;
position: relative;
}
The reason, why it's better without div.clear (apart that it feels wrong to have an empty element) is Firefox'es overzealous margin assignment.
If, for example, you have this html:
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>
then, in Firefox (8.0 at the point of writing), you will see 11px margin before product_container. What's worse, is that you will get a vertical scroll bar for the whole page, even if the content fits nicely into the screen dimensions.
Try this new css and markup
Here is modified HTML:
<div class="product_container">
<div class="products" id="products">
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
<div id="product_15" class="products_box">
<img src="/images/ecommerce/card_default.png">
<div class="price">R$ 0,01</div>
</div>
</div>
And here is modified CSS:
<pre>
.product_container
{
text-align: center;
height: 150px;
}
.products {
left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
right: 50%;
position: relative;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
</div>
</div>
<div class="clear"></div>
</div>
.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center
{
float: right;
right: -50%;
position: relative;
}
.clear
{
clear: both;
}
.product_container
{
overflow:hidden;
}
If you dont provide "overflow:hidden" for ".product_container" the "outer-center" div will overlap other nearby contents to the right of it. Any links or buttons to the right of "outer-center" wont work. Try background color for "outer-center" to understand the need of "overflow :hidden"
I found interesting solution, I was making slider and had to center slide controls and I did this and works fine. You can also add relative position to parent and move child position vertical. Take a look http://jsfiddle.net/bergb/6DvJz/
CSS:
#parent{
width:600px;
height:400px;
background:#ffcc00;
text-align:center;
}
#child{
display:inline-block;
margin:0 auto;
background:#fff;
}
HTML:
<div id="parent">
<div id="child">voila</div>
</div>
Do display:table; and set margin to auto
Important bit of code:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
No matter how many elements you got now it will auto align in center
Example in code snippet:
.relatedProducts {
display: table;
margin-left: auto;
margin-right: auto;
}
a {
text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
test1
test2
test3
</div>
I'm afraid the only way to do this without explicitly specifying the width is to use (gasp) tables.
Crappy fix, but it does work...
CSS:
#mainContent {
position:absolute;
width:600px;
background:#FFFF99;
}
#sidebar {
float:left;
margin-left:610px;
max-width:300;
background:#FFCCCC;
}
#sidebar{
text-align:center;
}
HTML:
<center>
<table border="0" cellspacing="0">
<tr>
<td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>
Simple fix that works in old browsers (but does use tables, and requires a height to be set):
<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
<table style="width:100%"><tr><td align="center">
In the middle
</td></tr></table>
</div>
<style type="text/css">
.container_box{
text-align:center
}
.content{
padding:10px;
background:#ff0000;
color:#ffffff;
}
use span istead of the inner divs
<div class="container_box">
<span class="content">Hello</span>
</div>
I know this question is old, but I'm taking a crack at it. Very similar to bobince's answer but with working code example.
Make each product an inline-block. Center the contents of the container. Done.
http://jsfiddle.net/rgbk/6Z2Re/
<style>
.products{
text-align:center;
}
.product{
display:inline-block;
text-align:left;
background-image: url('http://www.color.co.uk/wp-content/uploads/2013/11/New_Product.jpg');
background-size:25px;
padding-left:25px;
background-position:0 50%;
background-repeat:no-repeat;
}
.price {
margin: 6px 2px;
width: 137px;
color: #666;
font-size: 14pt;
font-style: normal;
border: 1px solid #CCC;
background-color: #EFEFEF;
}
</style>
<div class="products">
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
<div class="product">
<div class="price">R$ 0,01</div>
</div>
</div>
See also: Center inline-blocks with dynamic width in CSS
This is one way to center anything within a div not know the inner width of the elements.
#product_15{
position: relative;
margin: 0 auto;
display: table;
}
.price, img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
my solution was:
.parent {
display: flex;
flex-wrap: wrap;
}
.product {
width: 240px;
margin-left: auto;
height: 127px;
margin-right: auto;
}
add this css to your product_container class
margin: 0px auto;
padding: 0px;
border:0;
width: 700px;