In the following test case, the alt text is horizontally centered, but it's stuck to the top of the box. How do I get it in the middle?
<html>
<body>
<div style="height: 300px; width: 300px; border: solid black 1px;">
<img src="asdfasdf" alt="foo" style="display: block; text-align: center; vertical-align: middle"/>
</div>
</body>
</html>
One advantage of tables is they provide cross-browser vertical centering. DIVs don't. This is once case where I'd bite the bullet and add those ugly TRs and TDs.
<table cellspacing="0" style="width:300px;height:300px;border:1px solid black;">
<tr>
<td style="vertical-align:middle;text-align:center;">
<img src="asdfasdf" alt="foo" />
</td>
</tr>
</table>
It's called a single-celled centering table and ugly as it is, it works.
Try using some spaces at the start of the alt attribute. It was the only thing that seemed to work for me on chrome.
Try with display:table-cell instead of block.
Related
I'm populating a large amount of text within td. I am trying to wrap the text with td if the text content takes up enough space, but the text keeps breaking out of the table.
td.noBorder {
border: none;
}
.alignTable {
border-collapse: collapse;
background: #f4f4f4;
padding-left: 10px;
text-align: center;
font: normal 13px Calibri;
color: #5a5a5a;
}
table tr td {
height: 30px;
border: solid 1px #cbd0d2;
}
<div style="margin:0 auto;">
<div style="width:730px; margin:0 auto;">
<h1 style="height:20px;font:normal 18px Calibri;color:#010101;font-weight:600;border-collapse: collapse; margin-left:20px"> Related Links </h1>
<div style="width:730px; margin:0 auto;">
<h2 style="padding-left:23px;"> Header </h2>
<table border="1" width="100%" cellpadding="0" cellspacing="0" class="alignTable" >
<tr>
<td class="noBorder" style="text-align: left;padding-left: 23px;"><!-- #06999c -->
<img src="images/arrow.png" width="5" height="10" alt="" /> <a style="padding-left: 8px;" href="{$hyperlink}" target="_blank"> LARGE TEXT </a></td>
<td class="noBorder"/>
<td class="noBorder"/>
</tr>
</table>
</xsl:for-each>
</div>
</div>
</div>
Solution 1: Make It Scrollable
You can make the td automatically scrollable if the content exceeds its regular size by setting its overflow property to auto. If you expect that the td will usually overflow its boundaries, you could also pass overflow: scroll so that it always renders with a scrollbar. Check out the MDN article if you decide to go that route.
Solution 2: Flexbox
Within the td, you could add a div and give it display: flex. Doing this would allow you to apply styles solely to that div without breaking outside of the table. This goes against the cascading principle of CSS, but should be a convenient workaround if that's all you need.
If you're unfamiliar with flexbox styles, Chris Coyier does a good job of explaining them. Flexbox is supported by nearly all modern browsers, and can be coaxed to work with IE9 and 10 if you apply vendor prefixes.
Suggestion: Refactor Your Markup
Just so you're aware, using a table-based layout is no longer a recommended way to structure most websites. If it's at all possible to refactor this into div's, doing so will keep your stylesheets organized and manageable.
You have several possibilities, one to add vertical scroll if text exceeds the margin, one to adjust the font size to fit the text inside, you should see what fits best in your page. If you create a snippet here I can help you more precise!
A typical css alignment problem:
<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
<tr>
<td style="padding:0;">
<div style="height:100%; width:100%; background-color:#abc; position:relative;">
test of really long content that causes the height of the cell to increase dynamically
</div>
</td>
<td>
<div>text</div>
<div ></div>
<img style="vertical-align: bottom;" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/1118727_100000298033362_1412277170_q.jpg"/>
</td>
</tr>
</table>
http://jsfiddle.net/R5TAY/
How would I make the image always appear on the bottom of the table, and the text to stay in the middle?
Thanks
Based on your example, you could use positioning to achieve what you want:
td {
position:relative;
}
img {
position:absolute;
bottom:0;
}
jsFiddle example
You can set the vertical-align css property:
#your_td {
vertical-align: bottom;
}
See this FIDDLE
Set valign to bottom
<td valign="bottom">
Hope this helps
I have used <div align="center"> and put the image inside the div tag. Well the image is at the center but not at the middle. The image started from the top of div tag and placing at the center but I want it to be placed at the middle not at the top.
When I googled it I found <td valign="middle">. and its working as I intended and below is what I have designed after googling,
<div align="center" style="width:510px;height:510px;margin-left:300px">
<table style="width:510px;height:510px">
<tr>
<td align="center" valign="middle">
<img id="main" src="dock.jpg" style="max-width:500px;max-height:500px"/>
</td>
</tr>
</table>
</div>
But using a table for these purpose is it harmful ? Because I have tried <div align="center" style="vertical-align:middle"> but does not seem to work as i expected and please let me know if there is a way to do without table ?
You shouldn't be using <div align="center"> either really, its been deprecated:
http://reference.sitepoint.com/html/div/align
This attribute is deprecated. The correct method for aligning a div is
to use the CSS text-align attribute.
I'm not certain on the best way of vertically aligning div's (although you may find this article worth reading), but I know that you are right, you shouldn't use tables as a solution. Table should only be used when creating a table of data results for example, never layout purposes.
This will help you i think so:
just give #to div. and then style it in CSS as follow:
position: absolute;
left: 50%;
right: 50%;
width: _px;
height: _px;
margin: half of the width, half of the height;
Try this. May help you.
<div style="width:510px;height:510px;border:1px solid;margin:auto;">
<table style="width:100%; height:100%;">
<tr>
<td align="center">
<img id="main" src="wp1.JPG" style="max-width:300px;max-height:300px;"/>
</td>
</tr>
</table>
</div>
I am trying to put two images side by side inside a <td> (also tried one <td> for each img), but has some white spaces between the images, and do not understand where they come .. I can solve my problem using float, but I'm trying to avoid this. If someone can explain to me why this happens. I took some tips from other questions, but it doesn't work.
Here is my code:
<html>
<head>
<style "text/css">
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse;}
</style>
</head>
<body style="background: black;">
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
</td>
</tr>
<tr>
<td>
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
<img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
</td>
</tr>
</table>
</center>
</body>
you can notice that the top image has 800 px height, and the other ones has 400px each one, what I need is some kinda square, without any spaces between the images.
imgs are inline elements. The horizontal space between the images is coming from the whitespace between the images in the HTML. The same reason that there's a space between the characters here.
So, to fix that, remove the whitespace: http://jsfiddle.net/xMW7N/2/
The vertical space is also because the images are inline elements. The gap is the space reserved for descenders in letters like g and j.
To fix that, set vertical-align: top on img: http://jsfiddle.net/xMW7N/3/
Although in your case (as mentioned in your question), setting float: left works just fine: http://jsfiddle.net/xMW7N/4/
That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.
It's the whitespace in your markup itself. If you remove the line-break and the spaces between the two images, the space will go away.
The whitespace is treated as text, as a single space character.
This is easier done without tables: http://jsfiddle.net/feSxA/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: black;
}
.imgHolder {
width: 800px;
margin: auto;
}
.imgHolder img {
float: left;
}
</style>
</head>
<body>
<div class="imgHolder">
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
<img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
</div>
</body>
</html>
try adding a border="0" in your table element
Add display: block; to your images.
This will remove any gaps caused by the image being inline but you may need to split the cells up to allow them to sit side by side.
You can also remove the whitespace which should get rid of the whitespace.
I've been having this problem for awhile now.
Anyways, given this code:
<table>
<tr>
<td><img src="" /></td>
<td valign="middle">Text</td>
</tr>
</table>
This renders a format with an image to the left, and some vertically centered text to the right of it. This works because then I can have multi-line text, and still have the image positioned "nicely".
Now, ideally, tables should only be used for tabular data, yes? So how can I represent this in CSS?
I'm thinking <div> tags? But I encapsulate the entire bit in a <p> box with style="display: table; border: 1px solid black;", and I'm afraid relative positioned divs might end up jutting out of the box, necessitating tweaking, which I am loathe to do in CSS...
Help!
HTML:
<div id="container">
<img src="..." />
<p>text</p>
</div>
CSS:
#container {
width: 200px;
}
#container img, #container img{
width: 100px;
float: left;
}
<div style="vertical-align: middle;">
<img style="float:left;" src="" alt="" />
<p>Your text</p>
</div>
it doesn't matter what tags you are using (especially after a css reset). you just need to set the wrapper tag display: table; and the nested cell tags to display: table-cell; after that you can use the vertical-align you also may need put even more tags around your content to recreate a true table, whit table rows.