Images usually have a gap below them. To avoid that, I give them display:block but if I do that in a table, the image goes to the left.
How to have the image in the center and with no gap below it?
(I use inline CSS because I use it in a mail)
I have it here to play: https://jsfiddle.net/rc6jzvx2/
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; text-align:center;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>
You can use margin:0 auto instead of text-align to center the image. It works fine with display:block:
<table style="margin:0 auto; width:80%;">
<tr>
<td style="background-color:gray">
<img style="display:block; margin:0; padding:0; margin:0 auto;" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>
You can get rid of the gap below the image and center it by setting the vertical-align property of the image to top and setting the text align to center on the table cell, not the image:
table {
margin: 0 auto;
width: 80%;
}
td {
background-color: gray;
text-align: center;
}
img {
vertical-align: top;
}
<table>
<tr>
<td>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</tr>
</table>
<table style="margin:0 auto; width:80%;">
<tr>
<table style="margin:0 auto; width:80%;">
<tr>
<td >
<div style="background-color:gray;text-align:center">
<img style="" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</div>
</td>
</table>
</table>
EDIT:
If you use it for a mail, as I just read, then it is fine to use the inline-styles.
SOLUTION:
You can just use display: block and margin: 0 auto; in your image for it to center in its container.
You can create a class which you can later on keep using when you need the same style for different images:
.img-center {
display: block;
margin: 0 auto;
}
Also, I recommend you remove your inline-styles and add them in an external css file for separation of concerns and reusability.
JSFIDDLE
CODE SNIPPET:
.my-table {
margin: 0 auto;
width: 80%;
}
.img-center {
display: block;
margin: 0 auto;
}
.bg-gray {
background-color: gray;
}
<table class="my-table">
<tr>
<td class="bg-gray">
<img class="img-center" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png">
</td>
</table>
how can i show panel over iframe. I have tried using z-Index but its not working check out the sample image. We'll I didn't tried using css i use Z-Index but it is not working.
Below is my code...
<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr align="left"><td align="left"><iframe width="70%" frameborder="0" height="770" id="myframe" runat="server" src="about:blank"></iframe></td></tr></table>
<div class="slide-out-div"><a class="handle" href="http://link-for-non-js-users">Content</a><h3 class="style1">Menu Items</h3><table border="0">
<tr style=" float:left; height:39px"><td><ul><li>Special Instructions</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Processing Exception</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Account Coding</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>View My Notes</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Approve/Disapprove</li></ul></td></tr>
<tr style=" float:left; height:39px"><td><ul><li>Save & Close</li></ul></td></tr>
</table>
</div>
You should look at using the position:absolute CSS styling.
Here is an example...
<div id="straddle">
Here is the straddling div<br/>
Here is the straddling div
</div>
<iframe id="myframe" src="about:blank"></iframe>
With the following example CSS...
#myframe {
height:100px;
width:200px;
margin-left:100px;
}
#straddle {
position:absolute;
width:200px;
border:1px solid red;
}
Please see this jsfiddle live demo
Hi I have the following HTML:
<div id="CONTENT">
<div id="SIDEBAR"></div>
<div id="MAIN">
<table>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span></label><span class="colon">:</span></div></td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label with a really long title</span></a></span><span class="colon">:</span></div></label>
</td>
<td>hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf</td>
</tr>
<tr>
<td>
<div><label><span><a><span>My Label</span></a></span><span class="colon">:</span></div></label>
</td>
<td><input value="hsadnsdjfjkasdfhkjadshfjkahsdkfjhasdjkfhjkasdhfjkaf" /></td>
</tr>
</table>
</div>
</div>
and my CSS:
#CONTENT{
font-size: 87%;
padding: 5px;
}
#SIDEBAR{
width: 24em; float: left; margin-right: 0.5%;height: 200px;
border: 1px solid green;
}
#MAIN {
/*margin-left: 25em;*/
border: 1px solid purple;float:right;
}
table div{
position:relative;
}
.colon {
position: absolute;
right:0;
}
label {
margin-right: .4em;
}
In IE7 if you resize the window and make it thinner the table seems to move down the page. I would like to simply show a scrollbar like IE9 and FF.
Live Example : http://jsfiddle.net/aJsg2/19/
You'll need to set a min-width on the CONTENT in the stylesheet to be whatever the minimum width of the sidebar + main content is.
okay i have a div nested inside another div and the inner div is centered with 80% width. but its not fully centered.
how would i make it fully centered?
http://jsfiddle.net/xx8hx/
http://postimage.org/image/15linq5yc/
html
<div class="wrap">
<div class="content">
<h1>Contact</h1>
<form action="/cgi-bin/cgiemail" method="post">
<table width="50%" border="0" cellpadding="5" align="center">
<tr>
<td align="left" width="50%">First Name</td>
<td><input name="FirstName" type="text" id="fname" size="25" /></td>
</tr>
</table>
</form>
</div>
</div>
css
.wrap {
overflow:hidden;
width:100%;
height:100%;
position:absolute;
}
.content {
width:80%;
margin:20px auto;
padding:15px;
background:url(../images/contentback.png);
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;
}
This padding line in your css is causing the box to be off-centered.
/* stop do not edit */
#contact>div {
padding:50px 20px;
}
Getting rid of the left/right margin on that line (even though the comment told me not to) fixed it for me.
http://jsfiddle.net/4AX5b/
Add to your CSS:
body,
html {
padding: 0;
margin: 0;
}
Demo fiddle.
found it:
/* stop do not edit */
#contact>div {
pading: 50px 20px;
}
causes the error it should be:
#contact > div {
padding: 50px 0;
}
I have two tables on a page that I want to display side by side, and then center them within the page (actually within another div, but this is the simplest I could come up with):
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
<div id="outer">
<p>Two tables, side by side, centered together within the page.</p>
<div id="inner">
<div class="t">
<table>
<tr><th>a</th><th>b</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>4</td><td>9</td></tr>
<tr><td>16</td><td>25</td></tr>
</table>
</div>
<div class="t">
<table>
<tr><th>a</th><th>b</th><th>c</th></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>5</td><td>15</td></tr>
<tr><td>8</td><td>13</td><td>104</td></tr>
</table>
</div>
</div>
<div id="clearit">all done.</div>
</div>
I understand that it's something to do with the fact that the tables are floated, but I'm at a loss as to understand what I'm missing. There are many web pages that describe something like the technique I show here, but in any event it doesn't work; the tables cling stubbornly to the left hand margin.
Unfortunately, all of these solutions rely on specifying a fixed width. Since the tables are generated dynamically (statistical results pulled from a database), the width can not be known in advance.
The desired result can be achieved by wrapping the two tables within another table:
<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>
and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page (re)sizes (and the align="center" table attribute could be hoisted out into an outer div with margin autos).
I conclude that there are some layouts that can only be achieved with tables.
If it was me - I would do with the table something like this:
<style type="text/css" media="screen">
table {
border: 1px solid black;
float: left;
width: 148px;
}
#table_container {
width: 300px;
margin: 0 auto;
}
</style>
<div id="table_container">
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td>16</td>
<td>25</td>
</tr>
</table>
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td>16</td>
<td>25</td>
</tr>
</table>
</div>
I realize this is an ancient question, but here goes anyway.
The following will work in compliant browsers and IE8 in standards mode (i.e. with a doctype set).
#inner {text-align:center;}
.t {display:inline-block;}
Unfortunately, there's really no way to tweak it to work in IE6. For IE7, adding a zoom:1 to the .t divs (via a conditional comment) might help, but I don't have IE7 available for testing at the moment.
The problem is that you need to give #inner a set width (anything but auto or inherit). The margin: 0 auto; trick only works if the inner element is narrower than its container element. Without being given a width, #inner is automatically expanding to the full width of #outer, which causes its contents to be flush left.
Give your inner div a width.
EXAMPLE
Change your CSS:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
To this:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
Off the top of my head, you might try using the "margin: 0 auto" for #outer rather than #inner.
I often add background-color to my DIVs to see how they're laying out on the view. That might be a good way to diagnose what's going onn here.
The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.
For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).
<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
I found I could solve this by simply putting the two side by side tables inside of a third table that was centered. Here is the code
I added two lines of code at the top and bottom of the two existing tables
<style>
#outer {
text-align: center;
}
#inner {
text-align: left;
margin: 0 auto;
}
.t {
float: left;
}
table {
border: 1px solid black;
}
#clearit {
clear: left;
}
</style>
<div id="outer">
<p>Two tables, side by side, centered together within the page.</p>
<div id="inner">
<table style="margin-left: auto; margin-right: auto;">
<td>
<div class="t">
<table>
<tr>
<th>a</th>
<th>b</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>4</td>
<td>9</td>
</tr>
<tr>
<td>16</td>
<td>25</td>
</tr>
</table>
</div>
<div class="t">
<table>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td>15</td>
</tr>
<tr>
<td>8</td>
<td>13</td>
<td>104</td>
</tr>
</table>
</div>
</td>
</table>
</div>
<div id="clearit">all done.</div>
</div>
I have provided two solutions. Pick up which one best suits for you.
Solution#1:
<html>
<style>
#container {
width: 50%;
margin: auto;
text-align: center;
}
#first {
width:48%;
float: left;
height: 200px;
background-color: blue;
}
#second {
width: 48%;
float: left;
height: 200px;
background-color: green;
}
#clear {
clear: both;
}
#space{
width: 4%;
float: left;
height: 200px;
}
table{
border: 1px solid black;
margin: 0 auto;
table-layout:fixed;
width:100%;
text-align:center;
}
</style>
<body>
<div id = "container" >
<div id="first">
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table>
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "clear" ></div>
</div>
</body>
</html>
Solution#2:
<html>
<style>
#container {
margin:0 auto;
text-align: center;
}
#first {
float: left;
}
#second {
float: left;
}
#clear {
clear: both;
}
#space{
width:20px;
height:20px;
float: left;
}
.table, .table th, .table td{
border: 1px solid black;
}
</style>
<body>
<table id = "container" >
<td>
<div id="first">
<table class="table">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "space" >
</div>
<div id = "second" >
<table class="table">
<tr>
<th>Column1</th>
<th>Column2</th>
</tr>
<tr>
<td>Value1</td>
<td>Value2</td>
</tr>
</table>
</div>
<div id = "clear" ></div>
</div>
</td>
</table>
</body>
</html>
Note: Change the width percentage as per your need in 1st solution.