http://i.imgur.com/Veauoig.png
I am currently trying to work out how to make the 'From £' text to keep in the same position as the buttons above. The page is responsive so I have been unable to keep the text in one position.
The CSS I have used so far -
element.style {position: absolute; width: 97%;}
I put each of the 'From £' parts in their own class. Not sure if there is an easier way?
<div class="price2">From £300</div>
Any help would be great. Thanks!
Add a container for the element for the price and button so that they remain in context with each other.
http://jsfiddle.net/05orkj1a/
.prices{
width: 100%;
}
.price-column{
display: table-cell;
width: 33%;
text-align: center;
margin: 0 auto;
padding: 0 5px;
}
<div class="prices">
<div class="price-column">
<button>Bass</button>
<div class="price2">From £65</div>
</div>
<div class="price-column">
<button>Mid</button>
<div class="price2">From £300</div>
</div>
<div class="price-column">
<button>Treble</button>
<div class="price2">From £715</div>
</div>
</div>
You could also Float the columns left to cause them to collapse vertically as the screen shrinks with the same html. Just change the margin or padding depending on how far apart you want them spaced
http://jsfiddle.net/z6agt11e/
.prices{
width: 100%;
overflow: hidden;
}
.price-column{
display: block;
float: left;
text-align: center;
padding: 5px 5px;
}
You can also add an outer container and then create a inner container for each button-price set.
Here is the HTML code:
<div class="outter">
<div class="block">
<div class="button">button1</div>
<div class="price2">From £65</div>
</div>
<div class="block">
<div class="button">button2</div>
<div class="price2">From £300</div>
</div>
<div class="block">
<div class="button">button3</div>
<div class="price2">From £715</div>
</div>
</div>
Here the CSS:
.outter{
width:100%;
}
.block{
width:33%;
background-color: yellow;
float:left;
text-align: center;
}
And here a jsfiddle:
http://jsfiddle.net/SoniaGM/ej4mdwx9/1/
Hope it helps.
You can use the CSS3 ::after pseudo-selector.
Give at button class:
position: relative;
Then you have to write something lime this:
.button-class::after {
content: 'From £300';
background: transparent;
height: 1%;
width: 3%;
position: absolute;
top: 20px;
left: 0px;
}
Obviously, you have to change height: 1%; width: 3%; and top: 20px; left: 0px;with whatever you want!
OK, I know that this is an old problem and there are some answers here on Stackoverflow, but none seems to contain a solution for my problem or I'm not fit to understand the answers provided.
I want to align content of one div on a page created with the help of Blueprint CSS horizontally and vertically centered as shown in the picture below and I can't figure out how. Most of the variations I tested use some sort of absolute positioning and all divs end up in the middle of the screen.
Try applying these styles to the div in which the text should be centered
.mydiv{
display: table-cell;
vertical-align: middle;
text-align: center;
}
I want to propose an alternative solution, using this CSS for the alignment:
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
It requires additional markup, as such:
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
Why would it be useful? Because display:table-cell and vertical-align: middle will not work in a div that has position:absolute which is something desirable when making columns and rows. Also, placing a div with the display-table & vertical-align combo inside a div that has absolute position will may be infructuous because you may not be able to make that inner div fill the whole outer div without knowing the size (which may depend on the viewport).
The complete code...
HTML:
<div class="left col">
<p>I want to be left aligned</p>
<p>Me too</p>
<p>More text</p>
</div>
<div class="right col">
<div class="top row">
<div class="alignh">
<div class="alignv">
<p>I want to be centered horizontally and vertically</p>
</div>
</div>
</div>
<div class="bottom row">
<p>Just some more text...</p>
</div>
</div>
CSS:
.col {
top: 0;
bottom: 0;
}
.row {
left: 0;
right: 0;
}
.row, .col {
overflow: hidden;
position: absolute;
border: 1px solid black;
}
.left.col {
left: 0;
width: 250px;
}
.right.col {
left: 250px;
right: 0;
}
.top.row {
top: 0;
height: 100px;
}
.bottom.row {
top: 100px;
bottom: 0;
}
.alignh {
display: table;
margin: 0 auto;
height: 100%;
}
.alignv {
display: table-cell;
vertical-align:middle;
}
See at Codepen.
I've searched the many similar questions like this, but none of the solutions are working. It should also be noted that I am using twitter bootstrap. I want a bunch of divs to span the entire length of the parent div at the bottom of it. I have tried putting them inside a div that text-align:center and then using float-left inside the gridPics class, and using display: inline-block, text-align :left and nothing seems to do it. The two in the example below are in the exact same spot, and I want them side by side. Here is what I have:
HTML:
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<!-- These are the divs to span across, when it works there would be more than two -->
<div class="gridPics"></div>
<div class="gridPics"></div>
<!-- They will also go over this image -->
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS:
.gridPics{
position: absolute;
z-index: 1;
width: 10%;
height: 20%;
background: #0000b3;
bottom: 0;
float: left;
}
.articleContent{
position: relative;
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
position: relative;
z-index: -1;
}
Here is where I am doing this, the blue divs would be pics (akin to thumbnails) that can be clicked. I want them to go all the way across:
/ScreenShot2013-01-09at85450PM_zps550e8e4a.png[/IMG]
Here's a fiddle:
http://jsfiddle.net/pureux/Er9eG/
You need a container for your gridPics and have it be absolute positioned (instead of the gridPics) at the bottom. Then float the gridPics inside of the container.
.picContainer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
min-height: 50px;
}
.gridPics {
width: 50px;
height: 50px;
float: left;
display: block;
margin-right: 4px;
margin-top: 4px;
}
Is this what you're trying to do:DEMO
HTML
<div class="row-fluid">
<div class="span8 offset2 articleContent">
<div class="gridPics"></div>
<div class="gridPics"></div>
<div class="clear"></div>
<img id="sidePic" src="img/about/aboutHeader_Mid1.png" alt="about">
</div>
<div class="span2"></div>
</div>
CSS
.gridPics{
width: 10%;
height: 20px;
background: #0000b3;
float: left;
border:solid #FFF 1px;
}
.articleContent{
box-shadow: 0 0 5px 5px #888;
}
#sidePic{
z-index: -1;
}
I have problem when I align multiple divs with different height to bottom. I want all divs are at bottom (even "closed chat" from example). One solution is using
position: absolute;
bottom: 0;
right XXpx;
but is there any other way to do it? I don't want to set right value with javascript.
Here is my example - http://jsfiddle.net/T3Evb/
#chatbar {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.chat {
display: inline-block;
background-color: green;
width: 200px;
text-align: center;
margin-right: 10px;
}
.chat.open {
display: inline-block;
height: 130px;
vertical-align: bottom;
}
<div id="chatbar">
<div class="chat open">
Chat window
</div>
<div class="chat">
Closed chat window
</div>
</div>
I've removed the float css property, and changed the display behaviour of those divs to be inline-block.
At this point, the vertical-align css property permits to align the element as I please.
it's easy:
make one html tag as container and one more for absolute, like this:
<div class="chat">
<div class="chat_contain">
<div class="chat_window"></div>
</div>
<div class="chat_contain">
<div class="chat_window"></div>
</div>
</div>
and the css:
.chat{
width:auto;
display:inline-block;
position:fixed;
bottom:0px;
right:0px;
}
.chat_contain{
position:relative;
float:right;
}
.chat_window{
position:absolute:
bottom:0px;
left:0px;
}
remember my code is for set up the position not for all stylesheets.
edit it by yourself ad good luck
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;