I want to center a div in the middle of my page, and have the div fit the contents. How can I do that?
I've tried
width: 1px;
white-space: nowrap;
margin: 0 auto;
Which centers the div, but then all the text is to the right of that.
display: inline-block makes the div fit the contents, but then margin: 0 auto; doesn't seem to work...
Does this work for you: http://vidasp.net/tinydemos/inline-centered-div.html
body { text-align:center; }
div { display:inline-block; }
Typically, if you want to center some text, you would make use of a container that spans the container in which you are centering and set text-align: center;.
CSS:
#container {
text-align: center;
}
HTML:
my text
If you want a container that's sized around the text, for purposes of a color background or border, stick in another inner container.
CSS:
#container {
text-align: center;
}
#inner_div {
display: inline;
/*other styles here*/
}
HTML:
<div id="container">
<div id="inner_div">my text</div>
</div>
So you have two options. If you don't actually need the div to fit the contents and just want the content centered without having to specify a width for the div, you can simply do:
<div style="display: flex; justify-content: center;">
<input type="button" value="Example Button" />
</div>
However, if you actually do want a div around your contents, such as to make a nice looking border or something, you can simply use two divs, instead:
<div style="display: flex; justify-content: center;">
<div style="display: inline-block;">
<input type="button" value="Example Button" />
</div>
</div>
The outer div will fill the space of the parent, the inner div will wrap its contents (which is a button, in this instance), and the button and inner div will be centered.
Try display: table;
div {
display: table;
margin: 0 auto;
}
Flexbox should do the trick:
.container {
display: flex;
}
.centeredDiv {
display: inline-block;
margin: 0 auto;
}
The only way to do this, javascript solutions aside, is to give it a width and set its left and right margins to auto:
<div style="margin-left:auto;margin-right:auto;width=80%">...</div>
All the other solutions will mess up your inner text.
The text is to the right because of width:1px. Set a bigger width.
Related
Why won't vertical-align: middle work? And yet, vertical-align: top does work.
span{
vertical-align: middle;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>
Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
<span style="">Works.</span>
</div>
Tested in FF3.
Now you can use flexbox for this type of layout.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://via.placeholder.com/60x60">
<span style="">Works.</span>
</div>
Here are some simple techniques for vertical-align:
One-line vertical-align:middle
This one is easy: set the line-height of the text element to equal that of the container
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Multiple-lines vertical-align:bottom
Absolutely position an inner div relative to its container
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Multiple-lines vertical-align:middle
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
If you must support ancient versions of IE <= 7
In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.
<style type="text/css">
#container {
width: 30px;
height: 60px;
position: relative;
}
#wrapper > #container {
display: table;
position: static;
}
#container div {
position: absolute;
top: 50%;
}
#container div div {
position: relative;
top: -50%;
}
#container > div {
display: table-cell;
vertical-align: middle;
position: static;
}
</style>
<div id="wrapper">
<div id="container">
<div><div><p>Works in everything!</p></div></div>
</div>
</div>
Variable container height vertical-align:middle
This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)
Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:
position: relative;
top: 50%;
transform: translateY(-50%);
Change your div into a flex container:
div { display: flex; }
Now there are two methods to center the alignments for all the content:
Method 1:
div { align-items: center; }
DEMO
Method 2:
div * { margin: auto 0; }
DEMO
Try different width and height values on the img and different font size values on the span and you'll see they always remain in the middle of the container.
You have to apply vertical-align: middle to both elements to have it been centered perfectly.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>
The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom:
On the left, the text is not aligned, on the right it is as shown above. A live demo can be found in this article about vertical-align.
Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. vertical-align: top on the span element then just positions it at the top of the line box.
The main difference in behavior between vertical-align: middle and top is that the first moves elements relative to the box's baseline (which is placed wherever needed to fulfill all vertical alignments and thus feels rather unpredictable) and the second relative to the outer bounds of the line box (which is more tangible).
The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.
If anyone needs to vertically center multi-lined text to an image, here are a few ways
(Methods 1 and 2 inspired by this CSS-Tricks article)
Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Method #2: Pseudo element on container (FIDDLE) (IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
Method #3: Flexbox (FIDDLE) (caniuse)
CSS (The above fiddle contains vendor prefixes):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
This code works in IE as well as FF:
<div>
<img style="width:auto; height:auto;vertical-align: middle;">
<span>It does work on all browsers</span>
</div>
Because you have to set the line-height to the height of the div for this to work
For the record, alignment "commands" shouldn't work on a SPAN, because it is an in-line tag, not a block-level tag. Things like alignment, margin, padding, etc won't work on an in-line tag because the point of inline is not to disrupt the text flow.
CSS divides HTML tags up into two groups: in-line and block-level. Search "css block vs inline" and a great article shows up...
http://www.webdesignfromscratch.com/html-css/css-block-and-inline/
(Understanding core CSS principles is a key to it not being quite so annoying)
Basically, you'll have to get down to CSS3.
-moz-box-align: center;
-webkit-box-align: center;
Use line-height:30px for the span so that text is align with the image:
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Another thing you can do is set the text's line-height to the size of the images within the <div>. Then set the images to vertical-align: middle;
That's seriously the easiest way.
Haven't seen a solution with margin in any of these answers yet, so here is my solution to this problem.
This solution only works if you know the width of your image.
The HTML
<div>
<img src="https://placehold.it/80x80">
<span>This is my very long text what should align. This is my very long text what should align.</span>
</div>
The CSS
div {
overflow:hidden;
}
img {
width:80px
margin-right:20px;
display:inline-block;
vertical-align:middle;
}
span {
width:100%;
margin-right:-100px;
padding-right:100px;
display:inline-block;
vertical-align:middle;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
Write these span properties
span{
display:inline-block;
vertical-align:middle;
}
Use display:inline-block; When you use vertical-align property.Those are assosiated properties
background:url(../images/red_bullet.jpg) left 3px no-repeat;
I generally use 3px in place of top. By increasing/decreasing that value, the image can be changed to the required height.
You can set image as inline element using display property
<div>
<img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
<span style="vertical-align: middle; display: inline;">Works.</span>
</div>
Using flex property in css.
To align text vertically center by using in flex using align-items:center; if you want to align text horizontally center by using in flex using justify-content:center;.
div{
display: flex;
align-items: center;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>
Using table-cell in css.
div{
display: table;
}
div *{
display: table-cell;
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>
On a button in jQuery mobile, for instance, you can tweak it a bit by applying this style to the image:
.btn-image {
vertical-align:middle;
margin:0 0 3px 0;
}
Multiline solution:
http://jsfiddle.net/zH58L/6/
<div style="display:table;width:30px;height:160px;">
<img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
<div style="display:table-cell;height:30px;vertical-align:middle">
Multiline text centered vertically
</div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->
Works in all browers and ie9+
It can be confusing, I agree. Try utilizing table features. I use this simple CSS trick to position modals at the center of the webpage. It has large browser support:
<div class="table">
<div class="cell">
<img src="..." alt="..." />
<span>It works now</span>
</div>
</div>
and CSS part:
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
Note that you have to style and adjust the size of image and table container to make it work as you desire. Enjoy.
Display flex with align-items: center; is the best way for vertically align the items
div {
display: flex;
align-items: center;
}
<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>it works.</span>
</div>
div {
display: flex;
align-items: center;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>It works.</span>
</div>
Firstly inline CSS is not recommended at all, it really mess up your HTML.
For aligning image and span, you can simply do vertical-align:middle.
.align-middle {
vertical-align: middle;
}
<div>
<img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
<span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>
Not sure as to why it doesn't render it on your navigation's browser, but I normally use an snippet like this when trying to display a header with an image and a centered text, hope it helps!
https://output.jsbin.com/jeqorahupo
<hgroup style="display:block; text-align:center; vertical-align:middle; margin:inherit auto; padding:inherit auto; max-height:inherit">
<header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">
<image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
http://lipsum.org</header>
</hgroup>
In 2022 and with nearly 96% unprefixed browser support, I'm surprised no one has suggested the use of a grid layout.
In this JSFiddle, 3 lines are all that are necessary to achieve the OP's objective (but multiple alignments are presented for comparison):
div {
display: grid;
grid-template-columns: min-content max-content;
align-items: center
}
An additional UI nicety would include the optional use of the gap property, which enables modulation of the space between each grid-item within the parent grid container (div).
Advantages of grid layout
Easy vertical AND horizontal alignment of grid-items
Modulation of space between grid-items
Any size image (using min-content) and text length (one line using max-content or wrapped (not shown in fiddle) using min-content) would work - no need to hard-code the image dimensions in the CSS (both usages demonstrated in the demonstrated in JSFiddle)
Modern approach
Disadvantages of grid layout
Older browser support is more challenging
Grid layouts generally require more experienced developers to implement properly - not as simple as block/inline-block display
<!DOCTYPE html>
<html>
<head>
<style>
.block-system-branding-block {
flex: 0 1 40%;
}
#media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
justify-content: center;
align-items: center;
}
.flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
width: 300px;
margin: 10px;
text-align: left;
line-height: 20px;
font-size: 16px;
}
.flex-containercolumn > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block-
system-branding-block">
<div class="flex-containerrow">
<div>
<a href="/" rel="home" class="site-logo">
<img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
<div class="site-name ">
This is my sitename
</div>
<div class="site-slogan "><span>Department of Test | Ministry of Test |
TGoII</span></div>
</div></div>
</div>
</div>
</body>
</html>
You probably want this:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
As others have suggested, try vertical-align on the image:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSS isn't annoying. You just don't read the documentation. ;P
I just can't get the button with class align-right to vertically align in the middle.
HTML:
<div class="panel-footer">
<span style="width:100%;" class="header-footer-item">
<button class="align-right" type="button">Save</button>
</span>
</div>
CSS:
.panel-footer {
height: 70px;
vertical-align: middle;
border: solid;
}
.header-footer-item {
display: inline-block;
line-height: 70px;
border: solid red;
}
.align-right {
float: right;
}
.align-middle {
vertical-align: middle;
}
Here's the jsfiddle:
https://jsfiddle.net/d1vrqkn9/2/
If I remove float:right from the button, it works, but I want it on the right.
If I change header-footer-item from inline-block to inline then the floated button renders above its containing element, which I thought was against the rules: (#4 in the accepted answer here How to vertically middle-align floating elements of unknown heights?) - although the parent element is then vertically aligned in the middle.
I have added line heights as per CSS Vertical align does not work with float
The big question is - how do I fix it? I'm also interested to know why making a child element (the button) float right makes the parent element (the span) no longer vertically align in the containing div (but only if it is inline-block, not inline). ...and finally, isn't it 'against the rules' (https://www.w3.org/TR/CSS21/visuren.html#float-rules, #4) for a floating box's outer top to be higher than the top of its containing block? ...which it clearly is if header-footer-item is inline.
There are so many questions about vertically aligning things you'd think they'd make a css for "Seriously, vertically align this thing - no matter what, no complaints, just do it: sudo force vertical-align:middle !important or I'm coming for you"
The cleanest way to do that is to use flex like this:
Add display: flex to your outer div panel-footer [Check code below]
Remove the float and use text-align:right on the span for the button. [Check code below]
Add align-self: center to the inner span. [Check code below]
For 1:
.panel-footer {
height: 70px;
border: solid;
display:flex;
}
For 2:
.header-footer-item {
text-align: right;
}
For 3:
.header-footer-item {
align-self: center;
}
jsFiddle: https://jsfiddle.net/d1vrqkn9/4/
Here's a version with proper HTML, and just enough CSS.
.panel-footer {
height: 70px;
border: solid;
position: relative;
}
.panel-footer button {
position: absolute;
right: .5em;
top: 50%;
transform: translate(0,-50%);
}
<div class="panel-footer">
<button>Save</button>
</div>
There's an accepted answer already with some flexbox magic, here's an answer without it and the extra wrapping span element.
.panel-footer{
position:relative;
height: 200px;
border:1px solid #000;
}
.panel-footer button.align-right{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
}
<div class="panel-footer">
<button class="align-right" type="button">Save</button>
</div>
If you don't need your button to be box-modeled then you can remove float:right; and add text-align:right to parent.
But I agree with previous answer that flexbox is pretty good answer to all positioning doubts.
Solution with text-align:
https://jsfiddle.net/d1vrqkn9/8/
Solution with flexbox:
https://jsfiddle.net/d1vrqkn9/9/
line-height will do. Try different height values.
<span style="width:100%; line-height: ??px;" class="header-footer-item">
In my point of view, trying to achieve that with a float element is a dead end.
If your goal is to have an element at the right inside another element, you better use another solution, like table positionning.
You just have to create the 4 following css class (the row element is not used in this case) :
.table {
display: table;
width: 100%;
}
.row {
display: table-row;
width: 100%;
}
.cell {
display: table-cell;
}
.cell-min-width {
display: table-cell;
width: 1%;
}
Then you just have to change your code for :
<div class="panel-footer table"> <!-- Position with table -->
<span style="width:100%;" class="header-footer-item">
<div class="cell"></div><!-- Empty cell to fill the left-->
<div class="cell-min-width"> <-- Cell with min width to fit the button -->
<button class="" type="button">Save</button>
</div>
</span>
</div>
https://jsfiddle.net/outch27/d1vrqkn9/366/
I have something like the following:
<div id="wrapper">
<span id="small">I want to be vertically centered!!!</span>
<span id="big">BIG</span>
</div>
Here's the jsfiddle:
https://jsfiddle.net/gjf1neeq/2/
How can I vertically center the first span?
I suggest both vertical-align: middle as well as setting a line-height.
While the line-height isn't strictly needed, it is a useful means to determine the height over which you'd like the text to be centered. For example, if you knew you wanted the height of the space to be 100px, you could set the line-height: 100px;, and it would occupy 100px, and both lines of text would be centered in that space.
span#small,
span#big {
display: inline-block;
vertical-align: middle;
line-height: 3em;
}
Working Fiddle
Giving the spans display:inline-block; vertical-align:middle; will vertically center them with respect to each other.
span {display:inline-block; vertical-align:middle;}
span#big {font-size: 200%;}
<div id="wrapper">
<span id="small">I want to be vertically centered!!!</span>
<span id="big">BIG</span>
</div>
You can do it with flexbox:
#wrapper {
display: flex;
align-items: center;
}
#big {
font-size: 200%;
}
https://jsfiddle.net/686rusgn/1/
I have a text element centered with text-align: center;, I want to place another element (a small inline <span>) to the right of it without affecting its position.
Neither of the elements (and especially the span) have a known size, so I can't use an offsetting margin on the left of the text element. Is there a way to do that in pure CSS?
Obligatory code that doesn't work:
<div style="text-align: center;">
<h3 id="centered-text">My centered text</h3>
<span class="to-the-right" style="background-color: blue;">BADGE</span>
</div>
how's this?
#centered-text {
display: inline-block;
}
#to-the-right {
display: inline-block;
position: absolute;
margin-left: 4px;
}
<div style="text-align: center;">
<div id="centered-text">My centered text</div>
<div id="to-the-right" style="background-color: blue;">BADGE</div>
</div>
I made your H3 not an H3 because it made the BADGE appear weirdly high above the title, but that could be easily corrected by giving the BADGE an attribute like "top: 10px;"
If you can put the h3 and the span inside a wrapper, you can center that wrapper, and position the span outside the wrapper using absolute positioning.
This may be a bit tricky if the h3 is full page width (the span will be outside of the visible area), or if the span contains a longer text (it may wrap awkwardly). However, it's a start, and those issues may not be issues to you.
.wrapper {
display: inline-block;
position: relative;
}
h3 {
display: inline-block;
margin: 0;
}
.wrapper span {
display: block;
position: absolute;
left: 100%;
top: 0;
}
<div style="text-align: center;">
<div class="wrapper">
<h3 id="centered-text">My centered text</h3>
<span class="to-the-right" style="background-color: blue;">BADGE</span>
</div>
</div>
Your css is off. Give your div an id and then
#divid {margin-left:auto; margin-right:auto; width:100%;}
h3 {text-align:center;}
A way to do this without using positioning is to use display: flex and a pseudo element. I personally think that oxguy3's way is better, but if you want to stay away from positioning then this will also do the trick.
span {
background: blue;
}
div {
display: flex;
justify-content: center;
}
div:before, span {
content: "";
flex: 1 1;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<div>
<h3>My Centered Text</h3>
<span>BADGE</span>
</div>
This does have a few issues that may or may not matter based on your needs. If any other elements are needed in the div, then some reconfiguration is necessary, because any new elements also become flex-items and mess with the centering of the h3.
Also, as you may notice the span now extends to the edge of the div. If this is not a problem, then the markup is fine as is, but if it is a problem then wrapping it in another element also fixes this problem, like so:
span {
background: blue;
}
.container {
display: flex;
justify-content: center;
margin-bottom: 5%;
}
.container:before,
.badge {
content: "";
flex: 1 1;
}
* {
margin: 0;
padding: 0;
}
<div class="container">
<h3>My Centered Text</h3>
<div class="badge"><span>BADGE</span></div>
</div>
It's not perfect and, as I said, I like oxguy3's answer better, but if you want to stay away from positioning, then I think this is a good alternative.
Here's a codepen with both examples.
I want to float a div to center. Is it possible? text-align: center is not working in IE.
There is no float to center per se. If you want to center a block element inside another do this:
<div id="outer">
<div id="inner">Stuff to center</div>
</div>
with:
#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }
Now that won't make the text wrap around it (like it would with a float left or right) but like I said: there is no float center.
This has always worked for me.
Provided you set a fixed width for your DIV, and the proper DOCTYPE, try this
div {
margin-left:auto;
margin-right:auto;
}
Hope this helps.
The usual technique for this is margin:auto
However, old IE doesn't grok this so one usually adds text-align: center to an outer containing element. You wouldn't think that would work but the same IE's that ignore auto also incorrectly apply the text align center to block level inner elements so things work out.
And this doesn't actually do a real float.
floating divs to center "works" with the combination of display:inline-block and text-align:center.
Try changing width of the outer div by resizing the window of this jsfiddle
<div class="outer">
<div class="block">one</div>
<div class="block">two</div>
<div class="block">three</div>
<div class="block">four</div>
<div class="block">five</div>
</div>
and the css:
.outer {
text-align:center;
width: 50%;
background-color:lightgray;
}
.block {
width: 50px;
height: 50px;
border: 1px solid lime;
display: inline-block;
margin: .2rem;
background-color: white;
}
Following solution worked for me.
.algncenterdiv {
display: block;
margin-left: auto;
margin-right: auto;
}
One of my websites involves a div whose size is variable and you won't know it ahead of time. it is an outer div with 2 nested divs, the outer div is the same width as the first nested div, which is the content, and the second nested div right below the content is the caption, which must be centered. Because the width is not known, I use jQuery to adjust accordingly.
so my html is this
<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>
and then I center the captions in jQuery like this
captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
Use "spacer" divs to surround the div you want to center. Works best with a fluid design. Be sure to give the spacers height, or else they will not work.
<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>
<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
This worked for me..
div.className {
display: inline-block;
margin: auto;
}
this could help you..:D
div#outer {
width:200px;
height:200px;
float:left;
position:fixed;
border:solid 5px red;
}
div#inner {
border:solid 5px green;
}
<div id="outer">
<center>
<div id="inner">Stuff to center</div>
</center>
</div>
No, it isn't.
You can either have content bubble up to the right of an element (float: left) or to the left of an element (float: right), there is no provision for having content bubble up on both sides.
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">
<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>
Float the div in the background to the max width, set a div inside that that's not transparent and center it using margin auto.
this works nicely
width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space
This resizes nicely with adaptive layouts also..
CSS example would be:
.centered-div {
position:fixed;
background-color:#fff;
text-align:center;
width:40%;
right:0;
margin-right:30%;
}
This worked for me.
I included an unordered list on my page twice.
One div class="menu" id="vertical" the other to be centered was div class="menu" id="horizontal". Since the list was floated left, I needed an inner div to center it. See below.
<div class=menu id="horizontal">
<div class="fix">
Centered stuff
</div>
</div>
.menu#horizontal { display: block; float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
Try this, it helped me: wrap the div in tags, the problem is that it will center the content of the div also (if not coded otherwise). Hope that helps :)