I currently use this way to center divs using a table and CSS:
<table width="69" border="0" align="center">
<tr>
<td width="59">
<div style="position:relative;">
<div style="position:absolute; text-align:left; top: 100px;">div2 content goes here</div>
<div style="position:absolute;text-align:left;">div content goes here</div>
</div>
</td>
</tr>
</table>
Here's the sample: http://2slick.com/div_center.html
Notice how expanding the browser doesn't change the centering of the divs. Does anyone know a way to do something similar using CSS and less code?
Give the div a fixed width and set both left and right margins to auto.
.centeredDiv {
width: 800px;
margin-left: auto;
margin-right: auto;
}
Common method is without using a table, set div margin:0 auto in its style.
Using a table isn't the best idea when trying to do positioning, unless you're displaying data. If you're trying to use a center layout page design check this out: http://simplebits.com/notebook/2004/09/08/centering/
margin:auto
Should do the trick on the centered div. To recreate your example pretty closely:
<div style="width:100px; margin:auto">
<div style="width:100px;">div content goes here</div>
<div style="width:100px;">div2 content goes here</div>
</div>
You can then add padding, text alignment etc as needed. Also good to get the inline styles out, but for examples inline is convenient.
Just set auto margins. See this page:
http://www.bluerobot.com/web/css/center1.html
Here goes...
CSS:
body {
text-align: center;
}
div {
width: 59px;
margin: auto;
text-align: left;
}
HTML:
<div>I'm a div!</div>
<div>So am I!</div>
Related
I made an image slider for my forum homepage but the content is comming out of the wrapper.
How can I make sure the content will always be 100% width of the wrapper?
HTML:
<div id="wrapper">
<table>
<tbody>
<tr>
<td>
<div class="rg-content">
//image slider code
</div>
</td>
</tr>
</tbody>
</table>
</div>
CSS:
#wrapper {
margin: 0 auto;
max-width: 980px;
width: 90%;
background: linear-gradient(#fefefe, #e7e7e7);
}
.rg-content {
width: 100%;
background: #101010;
}
Screenshot:
What's Going On
It looks like your #wrapper doesn't have overflow set to hidden. Personally I tend to stay away from tables and use either float'd block elements or inline-block elements. I recently built a slider using figure for the outside wrap, ul for the fixed width inner wrap, and lis for each item. I had to set the figure to overflow:hidden for it to hide everything that wasn't supposed to be visible. Try adding that.
Code
#wrapper {
overflow:hidden;
}
Just add
<table style="width:100%;">
http://jsfiddle.net/jzLN6/
EDIT:
according to your jsfinddle and your comments I made some modifications to get this result
http://jsfiddle.net/bB9tQ/4/embedded/result/
is not fully functional but maybe its a basic idea of what you want to do
so if you want the layout to be fluid you will have to do some changes
remove de px of your ul and change your display to inline-block because if you have
display: block
this will make your li elements to lose the normal flow on the page and you won't be able to use % to stretch the content
<ul style="width: 100%; display: inline-block; margin-left: ;">
after that you should use % on each li tag instead of px.
if this is an approach to what you need, please let me know to give you a better elaborated example
I have an <img> that I want to center in a <div>. All previous answers I've found here use some hack or require you to know the image's width, which varies in my case.
Horizontal centering with text-align: center on the parent is easy. I can't figure out how to vertically align.
jsFiddle example
FYI Facebook does this well using just HTML and CSS. So please no <table> or javascript hacks. It looks like they are using something with line-height to make their <img> vertically center.
Remember that vertical-align: middle; is not to useful on its own, you also need to set the line-height: line-height:400px;.
This is useful if you have no other text in your <div> (except maybe a single line).
Working example: http://jsfiddle.net/kobi/ZfMYy/5/
Add a rule in your css class:
{vertical-align:middle;}
html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}
<html>
<body>
<table id="wrapper">
<tr>
<td><img src="logo.png" alt="" /></td>
</tr>
</table>
</body>
</html>
As #kobi mentioned in a comment, all you need to do is set a line-height on your containing div. No tables.
jsFiddle example of vertically centered image
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I want to build a fluid layout using percentages for widths. Here is my HTML:
<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>
The problem is that the elements won't display together on one line. However, the layout works fine if I remove the line break between the them in the HTML:
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
What is the problem with the first HTML, above? How can I do something like that, but without using absolute position and float?
The problem is that when something is inline, every whitespace is treated as an actual space. So it will influence the width of the elements. I recommend using float or display: inline-block. (Just don't leave any whitespace between the divs).
Here is a demo:
div {
background: red;
}
div + div {
background: green;
}
<div style="width:50%; display:inline-block;">A</div><div style="width:50%; display:inline-block;">B</div>
The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-table or inline-block
50% + 50% + that space > 100% and that's why the second one ends up below the first one
Solutions:
<div></div><div></div>
or
<div>
</div><div>
</div>
or
<div></div><!--
--><div></div>
The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.
PS - I would also use inline-block instead of inline-table for this
Wrap them around a div with the following CSS
.div_wrapper{
white-space: nowrap;
}
Give this parent DIV font-size:0. Write like this:
<div style="font-size:0">
<div style="width:50%; display:inline-table;font-size:15px">A</div>
<div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
How can i do something like that but without using absolute position
and float?
Apart from using the inline-block approach (as mentioned in other answers) here are some other approaches:
1) CSS tables (FIDDLE)
.container {
display: table;
width: 100%;
}
.container div {
display: table-cell;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
2) Flexbox (FIDDLE)
.container {
display: flex;
}
.container div {
flex: 1;
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.
CSS Flexboxes
Simple modern solution. Better than HTML tables!
.container {
display: flex;
}
.container div {
flex: auto; /* also 1 or 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
Alternative: CSS Grids
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* also 50% */
}
<div class="container">
<div>A</div>
<div>B</div>
</div>
<div id="wrapper" style="width: 400px">
<div id="left" style="float: left; width: 200px;">Left</div>
<div id="right" style="float: right; width: 200px;">Left</div>
<div style="clear: both;"></div>
</div>
I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.
OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.
Honestly, I can see the problem. Floats are fantastic.
basically inline-table is for element table, I guess what you really need here is inline-block, if you have to use inline-table anyway, try it this way:
<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.
If you use a table you can (if you wish) add a space between the divs, set borders, padding...
<table width="100%" cellspacing="0">
<tr>
<td style="width:50%;">A</td>
<td style="width:50%;">B</td>
</tr>
</table>
Check a more complete example here: http://jsfiddle.net/qPduw/5/
The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.
Using float is probably easiest, and not such a bad idea. See this question for more details on how to fix the problem then.
If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..
html:
<div id="a">A</div>
<div id="b">B</div>
css:
#a, #b {
width: 49%;
display: inline-block;
}
#a {background-color: red;}
#b {background-color: blue;}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Vertically Center HTML Element Within a Div of Dynamic Height
I am currently designing a website for which i need to vertically center some content. The design is pretty basic: a fixed height header (left-aligned and always at the top of the page), and underneath that vertically centered images in a horizontal row (yes, horizontal scrolling, i know).
Ideally i would want the vertical centering of the images to be based on the 100% height of the viewport - the header (so a dynamic height that prevents the content from overlapping the header).
An example of the website can be found on http://bit.ly/vl1XNY, which is currently using tables for layout. The css and html i used can be found there too (of course).
I am aware of various solutions for centering content vertically within a container of fixed height, however none of them have worked for me because i'm using variable height and do not want to use absolute positioning (to prevent overlap). I have looked around and tried the table-cell solution, the line-height one, and the absolute positioning one.
So far the only solution that has worked exactly as i intended was using tables. But i would like to refrain from using them. Is anyone aware of a valid css and html solution for this problem? Or at least a more graceful solution?
Wohh, talk about timing, i was looking for such a solution just a few minutes ago and stumbled upon an article on this subject exactly, you can read it all about it here: Centering in the Unknown.
You can easily modify your code to make it work like so:
CSS
#wrapper {
background: none repeat scroll 0 0 blue;
height: 100%;
text-align: center;
}
#wrapper:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.center {
display: inline-block;
padding: 10px 15px;
vertical-align: middle;
width: 460px;
}
HTML
<div id="wrapper">
<div class="center">
<img src="images/a_1.jpg" alt=" ">
</div>
<div class="center">
<img src="images/a_2.jpg" alt=" ">
</div>
</div>
You can try the following code:
<div style="display:table-cell;">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
Please check the above code in the context of all HTML:
<style type="text/css">
html, body {height:100%;}
body {
margin:0; padding:0;
}
#header {
height:1.7em;
}
#content {
display:table-cell; vertical-align:middle; height:500px;
}
</style>
<div id="header"></div>
<div id="content">
<img src="..." style="... vertical-align:middle;">
<img src="..." style="... vertical-align:middle;">
</div>
This will only work with a fixed height table-cell, which can be achieved by calculating current viewport height with javascript
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a div with a background image that needs to be centered horizontally and vertically. On top of that image, I also want to display a 1-line text, also centered horizontally and vertically.
I managed to get the image centered, but the text is not centered vertically. I thought vertical-align:middle would do the trick.
Here's the code I have:
<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
<div style="color:#ffffff; text-align: center; vertical-align:middle;" >
Some text here.
</div>
</div>
Any ideas?
Workaround: I actually got this to work by using a table. (I'll probably be cursed to hell by the HTML community.) Is there any significant reason not to use this btw? I'm still interested in the solution using divs though.
<table width="100%" height="100%">
<tr>
<td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
</tr>
</table>
Horizontal centering of a block element is traditionally done this way:
div.inner { margin: 0 auto; }
Note: the above won't work with IE in quirks mode so always put a DOCTYPE at the top of your document to force it into standards compliant mode.
Vertical centering is much more tedious. See Vertical Centering in CSS
there is no direct vertical centering for div content in CSS, however there are indirect ways of achieving it.
http://phrogz.net/CSS/vertical-align/index.html
also many similar questions in SO. How to vertically center a div for all browsers?
In case you have to use only one line of text and parent div has fixed height use line-height property. Suppose parent height is 500px then use CSS line-height: 500px; for text.
Without using javascript (ala something like thickbox, etc. for positioning photos/captions centered), the closest I could come to was this:
<body style="height:200px; min-height:800px;">
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
Note that I had to specify some sort of height for the container (in this case the BODY but it could also have been applied to the wrapper DIV I think). In Explorer 6, you can set the BODY height to 100% but in Firefox this doesn't work and probably won't work in other modern browsers.
EDIT:
Found a better solution:
<style type="text/css">
html, body {height:100%;}
</style>
</head>
<body>
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
If you want to get VERTICAL centering, I would suggest to use a table inside the DIV (as suggested by Cletus above other ways might be tedious).
div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<table style="border: 1px solid #ff0000;">
<tbody>
<tr><td>
Some text here
</td></tr>
</tbody>
</table>
</div>
If you are only interested in HORIZONTAL centering (no vertical) you can use only DIV:
div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<div style="border: 1px solid #ff0000;">
Some text here
</div>
</div>
As you might have noticed in order to horizontally align a DIV inside a DIV you also need to specify a fixed width for the inner DIV. This might be somehow not what you want to do, so it might be easier to use always the 1st solution (the one with TABLE) and simply remove the "vertical-align: middle;" when you want to get only horizontal centering.
I tested this using document with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
on IE7, FF 3.6, SAFARI 4.0.4