I have these code block:
<table border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
I'd like to show my table in the center of the screen (vertically and horizontally).
Here is a demo.
How can I do that?
Horizontal centering is easy. You just need to set both margins to "auto":
table {
margin-left: auto;
margin-right: auto;
}
Vertical centering usually is achieved by setting the parent element display type to table-cell and using vertical-align property. Assuming you have a <div class="wrapper"> around your table:
.wrapper {
display: table-cell;
vertical-align: middle;
}
More detailed information may be found on http://www.w3.org/Style/Examples/007/center
If you need support for older versions of Internet Explorer (I do not know what works in what version of this strange and rarely used browser ;-) ) then you may want to search the web for more information, like: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html (just a first hit, which seems to mention IE)
This fixes the box dead center on the screen:
HTML
<table class="box" border="1px">
<tr>
<td>
my content
</td>
</tr>
</table>
CSS
.box {
width:300px;
height:300px;
background-color:#d9d9d9;
position:fixed;
margin-left:-150px; /* half of width */
margin-top:-150px; /* half of height */
top:50%;
left:50%;
}
View Results
http://jsfiddle.net/bukov/wJ7dY/168/
I think this should do the trick:
<table border="1px" align="center">
According to http://w3schools.com/tags/tag_table.asp this is deprecated, but try it. If it does not work, go for styles, as mentioned on the site.
For horizontal alignment (No CSS)
Just insert an align attribute inside the table tag
<table align="center"></table
I've been using this little cheat for a while now. You might enjoy it. nest the table you want to center in another table:
<table height=100% width=100%>
<td align=center valign=center>
(add your table here)
</td>
</table>
the align and valign put the table exactly in the middle of the screen, no matter what else is going on.
One way to center any element of unknown height and width both horizontally and vertically:
table {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See Example
Alternatively, use a flex container:
.parent-element {
display: flex;
justify-content: center;
align-items: center;
}
This guy had the magic wand we were looking for, guys.
To quote his answer:
just add "position:fixed" and it will keep it in view even if you scroll down. see it at http://jsfiddle.net/XEUbc/1/
#mydiv {
position:fixed;
top: 50%;
left: 50%;
width:30em;
height:18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em; /*set to a negative number 1/2 of your width*/
border: 1px solid #ccc;
background-color: #f3f3f3;
}
I tried above align attribute in HTML5. It is not supported. Also I tried flex-align and vertival-align with style attributes. Still not able to place TABLE in center of screen.
The following style place table in center horizontally.
style="margin:auto;"
Related
Given the following example: http://jsfiddle.net/upsidown/z4m7r/
HTML:
<table class="main-table" cellspacing="20">
<tr>
<td style="height:100%;"><table class="sub-table"><tr><td>Some text</td></tr><tr><td class="bottom-align">Some bottom aligned element</td></tr></table></td>
<td>Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. Some very long text. </td>
<td>Some other text</td>
</tr>
</table>
CSS:
.main-table {
width:300px;
vertical-align: top;
}
.main-table td {
vertical-align: top;
}
.sub-table {
height:100%;
}
td {
border:2px solid black;
}
td.bottom-align {
vertical-align: bottom;
background:yellow;
}
The yellow cell text should be vertically aligned at the bottom. This works on Firefox but not on Safari / Chrome (webkit) browsers.
Any idea how I can achieve that? Thanks in advance.
First off: Why are you using tables and nested tables at that? Is this really for tabluar data?
To your problem: Webkit most likely abides strictly by the CSS rules for height, which says, that height in per cent only applies if the containing block has an explicit height.
That means that you need to give the main-table a height (the height of a cell/row is explicitly calculated from the height of the table and the other cells/rows in the table). And if that is in turn in per cent, then also the next parent (here body), and so forth.
So either something like
.main-table { height: 500px; }
or
html, body, .main-table { height: 100%; }
will help.
(BTW, the height: 100% on the cell makes no sense.)
A simple solution is to fill the space with padding:
td.bottom-align {
padding-top:100%;
vertical-align: bottom;
background:yellow;
}
Here's the demo: http://jsfiddle.net/z4m7r/11/
--EDIT--
Set the parent table at 100% height and it should do the trick. Demo: http://jsfiddle.net/z4m7r/9/
I've updated your jsfiddle: http://jsfiddle.net/z4m7r/6/
To start with, I wouldn't use a table inside of another table as it will make the markup a nightmare to read and maintain. It's also difficult to put one row at the bottom of the table and the other at the bottom. Instead I just put two divs inside the cell:
<td class="firstcell" style="height:200px;">
<div>Some text</div>
<div class="bottom">Some bottom aligned text</div>
</td>
Next, I set the position of the parent cell to relative, and made the bottom div absolute:
.firstcell {
position: relative;
width: 100px;
}
.firstcell > div {
border: solid thin black;
}
.bottom {
position: absolute;
bottom: 0;
background: yellow;
}
i have a header, which takes the whole width of the screen. in my header i want to place 3 divs, which should be aligned next to each other. the div's on the side being fixed-width, and the middle should take the other space available. so i don't know the width of the header, and i don't know the width of the middle container.
right now i have this code:
html:
<div id="header">
<div id="menu-container">
menu goes here
</div>
<div id="logo-container">
logo goes here
</div>
<div id="music-player-container">
music player comes here
</div>
</div>
and css:
#header {
height: 200px;
margin: 0;
padding: 0;
border: 0;
}
#menu-container {
width: 400px;
height: inherit;
float: left;
}
#logo-container {
height: 100%;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-position: center;
float: left;
width: auto;
}
#music-player-container {
width: 400px;
height: inherit;
float: left;
}
which should be working according to other problems with the float.... it doesn't
You can use floated divs with negative margins:
http://jsfiddle.net/cy5E7/1/
In your case:
http://jsfiddle.net/AjVHy/
Negative margins are better then just left/right float fixed divs. We don't get messed layout if user have very small window. Look at this bad example (resize browser window to small width): http://jsfiddle.net/surendraVsingh/qZLHb/1/ (thanks to #SVS). In normal float layout, all floated divs are on place only if parent container is wide enough.
Another disadvantage of standard float layout is when we want column layout but we don't know height of middle content, look like it can look
float layout, dynamic content height
negative margins layout, dynamic content height
Switch the order of your second and third divs then use this CSS.
#menu-container, #music-player-container {
float:left;
width: 400px;
}
#music-player-container {
float:right;
}
#logo-container {
margin:0 400px;
}
jsfiddle example
I'm not exactly sure of what you are planning to code up, but in my perspective, I see it like this: "You want to have 3 columns, column 1 being of a fixed with, column 2 a fluid width and column 3 yet again of fixed width."
What I fail to understand here is that, in the case of a really small width monitor (like a 1024x768 resolution, for instance), having a 400px column on both sides would leave you with just 224px of logo space. It would look un-natural.
Anyways, if you would still like to continue, I suggest you enclose all the three divs [menu-container, logo-container & music-player-container] inside another element called header (If you're using HTML5) or another div with any name you like (If you're using <= HTML 4.01) and then fix it's width to 100%; and a fixed height of 200px;.
Then let the menu-container, float: left; and the music-player-container float: right;. This will give space to the logo-container. Let the logo-container have a width: auto;. Having done this will give you a basic semi-fluid header layout, if I'm right.
Cheers, hope your question gets solved quick :)
I understand what you're trying to do, and I am sorry to say that I have yet to find a solution for this issue without using some ugly form of JavaScript/jQuery.
Essentially, the problem is that CSS does not have any properties (not even when fiddling with display properties) that will allow you to have two elements, one with fixed width and the other taking up the remainder of the space in the div. There are some options with float that can allow you to very closely simulate this, but I can tell you that they are unlikely to give you what you really want.
There is a resource out there, a project called Bootstrap, that you can install like any other jQuery plugin (or you can actually use it like a "CSS" plugin - you'll see what I mean - if you don't want the JavaScript), that will enable you to do what you want.
Here is the link: http://twitter.github.com/bootstrap/download.html
I strongly recommend that you review the documentation first to make sure you are aware of any caveats/limitations.
Good Luck!
EDIT: I like rogal's answer, but before using it you should bear in mind that doing so removes your ability to add a left border and makes it very difficult to apply background images to the div with the negative margin.
another option:
#header {
display: table;
height: 200px;
margin: 0;
padding: 0;
border: none;
}
#header > div {
display: table-cell;
height: inherit;
}
#menu-container, #music-player-container {
width: 400px;
}
#logo-container {
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-position: center;
}
HTH
You could of course use a table..
-hides-
Something like this inside the header div:
<table width=100%>
<tr>
<td width=200>
menu
</td>
<td>
logo
</td>
<td width=400>
music
</td>
</tr>
</table>
(too lazy for CSS atm)
Can't think of a very good way to do this. Not an ideal solution, but you could turn this into a table.
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Then you can just set the dimensions of the div and the td that contains it to be the same.
I have an indeterminate number of table-cell elements inside a table container.
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
Is there a pure CSS way to get the table-cells to be equal width even if they have differently sized content within them?
Having a max-width would entail knowing how many cells you have I think?
Here is a working fiddle with indeterminate number of cells: http://jsfiddle.net/r9yrM/1/
You can fix a width to each parent div (the table), otherwise it'll be 100% as usual.
The trick is to use table-layout: fixed; and some width on each cell to trigger it, here 2%. That will trigger the other table algorightm, the one where browsers try very hard to respect the dimensions indicated.
Please test with Chrome (and IE8- if needed). It's OK with a recent Safari but I can't remember the compatibility of this trick with them.
CSS (relevant instructions):
div {
display: table;
width: 250px;
table-layout: fixed;
}
div > div {
display: table-cell;
width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}
EDIT (2013): Beware of Safari 6 on OS X, it has table-layout: fixed; wrong (or maybe just different, very different from other browsers. I didn't proof-read CSS2.1 REC table layout ;) ). Be prepared to different results.
HTML
<div class="table">
<div class="table_cell">Cell-1</div>
<div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
<div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
<div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>
CSS
.table{
display:table;
width:100%;
table-layout:fixed;
}
.table_cell{
display:table-cell;
width:100px;
border:solid black 1px;
}
DEMO.
Just using max-width: 0 in the display: table-cell element worked for me:
.table {
display: table;
width: 100%;
}
.table-cell {
display: table-cell;
max-width: 0px;
border: 1px solid gray;
}
<div class="table">
<div class="table-cell">short</div>
<div class="table-cell">loooooong</div>
<div class="table-cell">Veeeeeeery loooooong</div>
</div>
Replace
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell;"></div>
</div>
with
<table>
<tr><td>content cell1</td></tr>
<tr><td>content cell1</td></tr>
</table>
Look at all the issues surrounding trying to make divs perform like tables. They had to add table-xxx to mimic table layouts
Tables are supported and work very well in all browsers. Why ditch them? the fact that they had to mimic them is proof they did their job and well.
In my opinion use the best tool for the job and if you want tabulated data or something that resembles tabulated data tables just work.
Very Late reply I know but worth voicing.
this will work for everyone
<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>
This will also work for table data created by iteration
This can be done by setting table-cell style to width: auto, and content empty. The columns are now equal-wide, but holding no content.
To insert content to the cell, add an div with css:
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
You also need to add position: relative to the cells.
Now you can put the actual content into the div talked above.
https://jsfiddle.net/vensdvvb/
Here you go:
http://jsfiddle.net/damsarabi/gwAdA/
You cannot use width: 100px, because the display is table-cell. You can however use Max-width: 100px. then your box will never get bigger than 100px. but you need to add overflow:hidden to make sure the contect don't bleed to other cells. you can also add white-space: nowrap if you wish to keep the height from increasing.
How do I align a <div> which contains an image (or flash) vertically with CSS. Height and width are dynamic.
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle in conjunction with line-height: 0, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
You can do this by using inline-blocks, one with height: 100% (and same heights for HTML and BODY) and vertical-align: middle.
Example 1: http://jsfiddle.net/kizu/TQX9b/ (a lot of content, so it's full width)
Example 2: http://jsfiddle.net/kizu/TQX9b/2/ (an image with any size)
In this example I use spans, so It would work in IE without hacks, if you'd like to use divs, don't forget to add in Conditional Comments for IE .helper, .content { display: inline; zoom: 1; }, so inline-blocks would work for block elements.
In addition to the other answers here, the CSS3 flexible box model will, amongst other things, allow you to achieve this.
You only need a single container element. Everything inside it will be laid out according to the flexible box model rules.
<div class="container">
<img src="/logo.png"/>
</div>
The CSS is pretty simple, actually:
.container {
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
}
I've omitted vendor-prefixed rules for brevity.
Here's a demo in which the img is always in the centre of the page: http://jsfiddle.net/zn8bm/
Note that Flexbox is a fledgling specification, and is only currently implemented in Safari, Chrome and Firefox 4+.
I would recommend this solution by Bruno: http://www.brunildo.org/test/img_center.html
However, I ran into a problem w/ his solution w/r/t webkit. It appears that webkit was rendering a small space at the top of the div if the empty span was allowed to be there. So, for my solution I only add the empty span if I detect the browser to be IE (If someone figures out how to get rid of the space, let me know!) So, my solution ends up being:
HTML:
<div class="outerdiv">
<img src="..." />
</div>
CSS:
.outerdiv {
display: table-cell;
width: 200px;
height: 150px;
text-align: center;
vertical-align: middle;
}
.ie_vertical_align * {
vertical-align: middle;
}
.ie_vertical_align span {
display: inline-block;
height: 150px;
width: 0;
}
And if I detect the browser to be IE I add an empty span element before the img tag and a css style so it looks like:
<div class="outerdiv ie_vertical_align">
<span></span>
<img src="..." />
</div>
Here's a JSFiddle with this code.
Dušan Janovský, Czech web developer, has published a cross-browser solution for this some time ago. Read http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
If you don't care about IE7 and below, you don't have to use multiple nested divs. If you have a div that you want to align vertically, that div is within some container (even if the container is your <body>). Therefore, you can specify display: table-cell and vertical-align: middle on the container, and then your div will be vertically centered.
However, if you do care about IE7 and below, you will need an additional container to make it work (yes, via a hack).
Take a look at this fiddle. It displays correctly in IE6-9 and other major browsers. #container2 is present solely for IE7 and below, so if you don't care about them, you can remove it as well as the IE-specific conditional styles.
Set the image as background of the div and align it center
try the 50% padding trick:
<html>
<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line;
text-align:center; vertical-align:bottom;
padding: 50% 0 50% 0">test</div>
</body>
</html>
This is possible if you know the height of the image or flash object to be centered. You don't need to know the container's height/width, but you do need to know the contained height/width.
It's possible using float, clear and negative margins. Example: www.laurenackley.com homepage.
html
<div id='container'><!-- container can be BODY -->
<div id='vertical-center'> </div>
<div id='contained-with-known-height'>
<p>stuff</p>
</div>
</div>
css
#vertical-center{
height:50%;
width:1px;
float:left;
margin-bottom:-50px;/** 1/2 of inner div's known height **/
}
#contained-with-known-height{
height:100px;
clear:left;
margin:0 auto;/** horizontal center **/
width:700px;
text-align:left;
}
#container{/** or body **/
text-align:center;
/** width and height unknown **/
}
If you don't know the inner elements width/height. You are out of luck with <div>. BUT -- table cells (<td>) do support vertical-align:middle; If you can't get it done with the div stuff above, go with a table inside the container, and put the div you are centering inside a td with vertical-align middle.
So I have a 3-column layout on my webpage, but I can't get the things in the middle column to be centered. The columns on the left and right are of fixed width, so I created a container for the middle column and set its borders to equal the size of the left and right columns. Then, I used the margin:auto property on the div tag inside the middle container that has everything that I want in the middle column. If possible, I want this to work on all browser window sizes. This is my CSS:
#top
{
width:100%;
background-color:#FF0000;
height:30px;
overflow: auto;
width: 100%
}
#right
{
float:right;
width:100px;
background-color:#CCC;
height:100%;
}
#middleCont
{
margin-left:150px;
margin-right:100px;
}
#middle
{
margin:auto;
text-align:left;
}
#left
{
float:left;
width:150px;
height:100%;
}
And since I can't post html without the browser rendering it for some reason, I uploaded the relevant code in a text file: http://www.mediafire.com/?a89kr1bb4uwb4cf
Thanks in advance for the help.
Yes, for one, under #middle, you said text-align: left rather than text-align: center. The instant I changed this, it worked fine.
I inserted different types of tags into the document, including p, div, blockquote, a list, a table, and an image. The only problem I noticed is that the table did not center. Looking at a number of articles, I found that you had already implemented the recommended way of centering a table in CSS. I think that maybe, the only solution to this problem is either to make a table using the center tag or create a new block of text in your CSS file.
You can do what you like, but the recommended way is this:
#center {
margin: auto;
}
Then make a new table with #center as its ID.
<table id="center">
...
</table>
If you choose to use the center tag, you implement it like this:
<center>
<table>
...
</table>
</center>
Hope I helped a little. Good luck.
I do it this way. Working even for internet explorer 6.
<table border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100.0%;">
<tr>
<td width="50%" valign="top" style="width:50.0%;">
</td>
<td valign="top" style="width:900px;">
<div style="width:900px; border:1px solid white;"></div>
</td>
<td width="50%" valign="top" style="width:50.0%;">
</td>
</tr>
</table>
I suppose you can change the text-align:left to text-align:center for the selector #middle
If you want to use the method margin:0 auto for the #middle (and not margin:auto as you have it) then you have to set a fixed width, something like width:400px; or width:20%;.
If you want a fixed width center column then
#middle
/*this will keep the column width constant wile letting the space on either side expand*/
{
margin:auto;
text-align:left;
width: 600px; /* what ever width you want */
}
or specify fixed margins
#middle
/*this wil keep the space on either side constant wile letting the column expand*/
{
margin-left: 150px; /*to center column just keep the left and right margins equal*/
margin-right: 150px;
text-align:left;
}
I hope that answers your question.
P.S. It would have helped if you had posted the html too.
I am not sure if I follow exactly what you are trying to do - but what about if you use percentages rather than pixels for the width of all four divs?
#top
{
width:100%;
background-color:#FF0000;
height:30px;
overflow: auto;
width: 100%
}
#right
{
float:right;
width:25%;
background-color:#CCC;
height:100%;
}
#middleCont
{
margin-left:36%;
margin-right:26%;
}
#middle
{
margin:auto;
text-align:left;
}
#left
{
float:left;
width:35%;
height:100%;
background-color:#CCC;
}