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>
Is there a way I can achieve the position and formatting of this iframe with only css and divs instead of the table that I am using? I tired using 3 separate divs and applied css to them and could only partially achieve this format however the bottom of the iframe would overflow and it wasn't possible to view the bottom content of the page included.
<style>
body {
margin:0;
background-color:#efefef;
}
.frame{
width:100%;
height:100%;
margin:0px;
border-spacing:0;
border-collapse:collapse;
overflow:hidden;
}
.frame_leftspace{
width:250px;
}
.frame_topspace{
height:70px;
}
</style>
<table class="frame" width="100%">
<tr>
<td class="frame_topspace" colspan="2"></td>
</tr>
<tr>
<td class="frame_leftspace"></td>
<td>
<iframe style="width:100%; height:100%;" src="http://www.reddit.com/" frameborder="0"></iframe>
</td>
</tr>
</table>
This fiddle will show how to achieve this. First is your original code, then how I'd recreate it:
HTML:
<div class="topspace"></div>
<div class="iframe">
<iframe id="reddit" src="http://www.reddit.com/" frameborder="0"></iframe>
</div>
CSS:
.topspace { height: 70px; }
.iframe { padding-left: 250px; }
#reddit { height: 100%; width: 100%; }
Hope that helps.
I'm a little new to coding and I've found these boards really helpful over the last few weeks but I've come across a problem that other posts couldn't help me with, so here goes:
I have a number of divs within one rectangle div, 880px across. The left aligned divs are working perfectly but the floated right div, a video 560px across called #shopvid_2013_01 just won't line up right.
I want it so that the #shopvid_2013_01 div lines up exactly beside the #shop_13_01 div, but instead when I preview it on Firefox it seems to be right underneath another div I have and won't move no matter what margin-top or padding-top I use. I tried adding display:block and overflow:hidden as I read on other posts that might help, but to no avail.
Any help would be appreciated!
I've included my relevant html and css:
HTML
<div id="shop_13">
<div id="shop_13_01">
<div id="shop_13_text_01">
<div id="shop_smlheading">
<p><b>West Cork Rally 2013</b></p>
</div>
<div id="shop_p_13">
<p>Our highlights video from a cracking weekend in Clonakilty.</p>
</div>
<div id="buy_shop_01">
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6D49SM33FHD8U">
<input type="image" src="01 Images/buy_now_price.png" border="0" name="submit" alt="Buy Now">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
</div>
<div class="shopvid_2013_01">
<iframe width="560" height="315" src="http://www.youtube.com/embed/ozXu2-Zf5B0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
#shop_13 {
width:880px;
}
#shop_13_01 {
width: 320px;
height:315px;
margin:30px 0 0 0;
background-color:#E9E9E9;
float:left;
}
#shop_13_text_01 {
font-family: "Arial", sans-serif;
width:240px;
font-size:13px;
line-height:1.4em;
}
#shop_smlheading {
padding: 5px 0 0 20px;
font-size:15px;
}
#shop_p_13 {
font-family: "Arial", sans-serif;
width:240px;
font-size:13px;
line-height:1.4em;
margin: -15px 0 0 20px;
float:left;
}
#buy_shop_01 {
padding: 100px 0 0 0;
float:left;
}
#shopvid_2013_01 {
width: 560px;
height:315px;
float: right;
margin-top: 30px;
display:block;
overflow:hidden;
}
It seems that you are referencing shopvid_2013_01 as an ID rather than a CLASS. Try this:
.shopvid_2013_01 {
width: 560px;
height:315px;
float: right;
margin-top: 30px;
display:block;
overflow:hidden;
}
http://jsfiddle.net/gGtPK/
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.
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.