I have text and picture in table:
<table>
<tr><td>Jon Kowalsky</td>
<td rowspan="4"><img src="forrest.jpg" height="150px"/></td></tr>
<tr><td>Eagle Rock Ave</td></tr>
<tr><td>New York</td></tr>
<tr><td>ja#jankowalski</td></tr>
</table>
as you can see picture is in all four rows but it makes large spaces between text [picture below].
Can I keep text and image in table and make spaces between text smaller?
Since you have a fixed height for the image, the table row height does not change much. Either reduce the height of the image or increase rowspan of the table cell of the image and set the line-height of td to a lower value or 0.
<table>
<tr><td>Jon Kowalsky</td>
<td rowspan="6"><img src="forrest.jpg" height="150px"/></td></tr>
<tr><td>Eagle Rock Ave</td></tr>
<tr><td>New York</td></tr>
<tr><td>ja#jankowalski</td></tr>
<tr></tr>
<tr></tr>
</table>
And the css
td{
line-height: 0;
}
What is happening is that the text in the cells to the left will span the entire height of the cell with the picture occupying the specified amount of rows.
A possible solution is to use other html elements with a bit of CSS.
For example:
<div class="details">
<p>Jon Kowalsky</p>
<p>Eagle Rock Ave</p>
<p>New York</p>
<p>ja#jankowalski</p>
</div>
<img src="forrest.jpg" height="150px"/></td>
<style>
.details {
float: left;
}
.details p:first-child {
margin-top: 20px;
}
.details p {
margin: 0;
}
</style>
I have a table with 1 row and 2 columns. The left cell contains an image, the height of which is given in em (em is defined as 2vh, so everything will adjust according to the viewport height). The right cell contains some text.
<html>
<head>
<style>
body{
font-size:2vh;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img src="some.jpg" style="height: 18em">
</td>
<td>
Some text, more text, even more text.
</td>
</tr>
</table>
</body>
</html>
Now in Firefox and Internet Explorer the image shows with the proper ratio of width and height, and the text in the right cell is wrapped to the remaining width. But in Chrome and Opera it seems that the right cell adjusts its width to the text and the width of the image in the left cell is reduced to fit into the remaining space. So the question is: How can I force the left cell to adjust its width to the calculated width of the image? (The height/width ratio of the image is not always the same.)
The suggested answer addresses a different problem. It is about adjusting an image to the table cell. My problem is about adjusting the cell to the image.
Try this working fiddle, hope it will work
jsfiddle
CSS:
html. body, table {
margin: 0px;
padding: 0px;
}
table {
display: table;
width: 100%;
table-layout: fixed;
}
table tr {
display: table-row;
width: 100%;
}
table tr td {
display: table-cell;
width: 25%;
}
.imageTable {
float: left;
width: 100%;
}
.autoResizeImage {
max-width: 100%;
}
<div class="imageTable">
<table>
<tbody>
<tr>
<td>
<img class="autoResizeImage" src="http://www.hhacademy.org/computer-lcd-monitor-vector.jpg" />
</td>
<td>
<img class="autoResizeImage" src="http://gatelyacademy.org/wp-content/uploads/2014/10/computer-156513_640.png" />
</td>
<td>
<img class="autoResizeImage" src="http://i.dailymail.co.uk/i/pix/2013/01/07/article-2258276-16C8FB51000005DC-20_638x476.jpg" />
</td>
<td>
<img class="autoResizeImage" src="http://www.computer-repair-service.co.uk/wp-content/uploads/2013/08/mac-computer.png" />
</td>
</tr>
</tbody>
</table>
</div>
I solved this: The quirk is somewhere else. I had this somewhere in my CSS:
img{
max-width:100%
}
This is what caused the strange behavior in Opera and Chrome. If you're interested, check out this jsfiddle and compare the behavior in Opera and Chrome vs. Firefox and Internet Explorer: http://jsfiddle.net/martinvie/3moocskt/6/
I have a simple table with 1 TD with vertical-align:middle;. This TD contains an Image :
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
}
span
{
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
</td>
</tr>
</table>
</body>
</html>
Everything is Ok and the IMG is vertical-aligned.
But If I add another elements after that Image ( a span for example ) :
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
}
span
{
vertical-align:middle;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<td>
<img src='http://static.jsbin.com/images/favicon.png'/>
<span>aaa</span>
</td>
</tr>
</table>
</body>
</html>
Question
Doesn't the vertical align of the TD should vertical align all its childs ?
How can I make the span to be centered as well ?
NB
I don't want to add another TD , nor using float with padding/margin. IE8+.
edit:
Desired result :
Question
Doesn't the vertical align of the TD should vertical align all its childs ?
NO.
When you apply vertical-align to td, it is only applied to td, and is not inherited by any of its children.
If i have a TD with only span in it - it will vertical align. If I had a TD with only IMG inside it - it will also align.
This is because of the way vertical-align for td works. The total height of the cell i.e td is calculated and the whole cell is aligned vertically.
If there is a single img, then the height of td is same as that of img, so it seems that vertical-align for img is also middle. But actually, the td is vertically aligned to the middle with the img as vertical-align : baseline
Same is the case when there is a single span.
but if i have both - it doesn't. why is that ?
Because now, the height of td is the combined height of both img + span. So, actually, td is vertically aligned in the middle, but not img and span.
How can I make the span to be centered as well ?
You need to apply this CSS :
td > * {
vertical-align : middle;
}
This will apply the CSS to all the children.
Check the JSFiddle for a better picture.
Hope, this answers your question.
You can just use vertical-align: middle; to your span
img
{
height:43px;width:43px;
display: inline;
vertical-align: middle;
}
span
{
vertical-align:middle;
display: inline;
}
your jsbin
As per comment
You may think as if td is given vertical-align: middle; then it should align all the contents inside this but having an image and a span in which browser is understanding the image is what? : is this inline or inline-block, so you need to set display: inline or inline-block; Then you may see its working only applying display property for image. demo
Edit
img tag : source: display inline vs inline-block
They are "block" elements in that they have a width and a height.
It's true, they are both - or more precisely, they are "inline block" elements. This means that they flow inline like text, but also have a width and height like block elements.
Also check this:
Replaced Elements
A replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images ( tags), plugins ( tags), and form elements (, , , and tags). All other elements types can be referred to as non-replaced elements.
Replaced elements can have intrinsic dimensions—width and height values that are defined by the element itself, rather than by its surroundings in the document. For example, if an image element has a width set to auto, the width of the linked image file will be used. Intrinsic dimensions also define an intrinsic ratio that’s used to determine the computed dimensions of the element should only one dimension be specified. For example, if only the width is specified for an image element—at, say, 100px—and the actual image is 200 pixels wide and 100 pixels high, the height of the element will be scaled by the same amount, to 50px.
Replaced elements can also have visual formatting requirements imposed by the element, outside of the control of CSS; for example, the user interface controls rendered for form elements.
In an inline formatting context, you can also think of a replaced element as being one that acts as a single, big character for the purposes of wrapping and layout. A width and height can be specified for replaced inline elements, in which case the height of the line box in which the element is positioned is made tall enough to accommodate the replaced element, including any specified box properties.
Here's a JS fiddle solution
fiddle
Here's the css
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
display: inline;
height: 43px;
width: 43px;
position: relative !important;
float: left;
}
span
{
height: auto !important;
width: 80%;
float: right;
position: relative;
vertical-align: middle !important;
text-align: left;
}
In all the cases, the vertical-align: middle; on the td does what is expected of it. That is, align the td to the center of that row and the entire contents of the td to the vertical middle (by default) leaving equal spaces at the top and the bottom.
Here is what the W3 Spec says about vertical-align: middle:
The center of the cell is aligned with the center of the rows it spans.
Row height calculation:
The height of a 'table-row' element's box is calculated once the user agent has all the cells in the row available: it is the maximum of the row's computed 'height', the computed 'height' of each cell in the row, and the minimum height (MIN) required by the cells.
In CSS 2.1, the height of a cell box is the minimum height required by the content. The table cell's 'height' property can influence the height of the row (see above), but it does not increase the height of the cell box.
Cell boxes that are smaller than the height of the row receive extra top or bottom padding.
As a result of the above, the height of the tr and the td becomes 100px but the cell box takes up only the amount of height required by the contents (img height = 43px). Now since the Cell box is smaller than the row height, extra padding is added like shown in Box 5 of the image above and thus makes the contents also get aligned to the middle.
TD has only image:
When there is only an img, the content height is equal to the height of the img. So it gets positioned to the middle.
As can be seen in the above image, this does not require a vertical-align: middle on the img explicitly because the td aligns its contents to the middle.
TD has only inline data:
When the td has only a span or span plus an inline div, the height of the content is equal to the default line-height for text (or any specified line-height). In this case also, the td aligns it correctly.
When the text content goes beyond the first line (refer to the demo), you can see that the td automatically pushes the first-line (marked in cyan background) upwards to ensure that the contents on the whole is aligned to the middle (not just a single line).
TD has an image and a span:
When we put an img and a span (inline text) within the td, the content height becomes equal to the height of the img plus the line-height of the second and subsequent lines.
In this situation, there are two possible cases as described below:
Case 1 - img tag has no vertical-align specified
In this case, the img is aligned to the baseline (default). Then the td aligns the entire content to the middle. This means the td leaves around 28.5px (= (100-43)/2) gap at the top and the bottom of the content. Again, the vertical-align on td does the job, it puts the contents in the middle (that is, leave equal gap on top and bottom). But the text gets pushed down because img height is more.
If we reduce the img height to less than the line height (say 10px), we can see that even with img + span it gets aligned to the middle.
Case 2 - img tag has vertical-align: middle
In this case also vertical-align on the td does the same as what it did for Case 1. However, the text in this case is near the middle because the img is also aligned to the middle of the line.
table {
border: solid 1px red;
}
td {
height: 100px;
width: 200px;
vertical-align: middle;
border: solid 1px green;
}
img {
height: 43px;
width: 43px;
border: solid 1px green;
}
.one td + td img {
vertical-align: middle;
}
.three td + td img {
height: 10px;
width: 10px;
}
.four img {
vertical-align: middle;
}
.five img + img{
height: 50px;
width: 50px;
}
td:first-line {
background-color: cyan;
}
div {
display: inline;
}
<table>
<tr class='one'>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
</td>
</tr>
<tr class='two'>
<td>
<div>aaa</div>
<span>aaa</span>
</td>
<td>
<div>aaa</div>
<span>aaa aaaaaaa aaaaaaaa aaaaaaaa</span>
</td>
</tr>
<tr class='three'>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
Case 1
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
</tr>
<tr class='four'>
<td>
Case 2
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
<tr class='five'>
<td>
Case 3
<img src='http://static.jsbin.com/images/favicon.png' />
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span text...</span>
</td>
<td>
<img src='http://static.jsbin.com/images/favicon.png' />
<span>Image + Span + more text.......</span>
</td>
</tr>
</table>
Just add vertical-align:middle; to your img style?
Demo
<style>
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
width:100%;
border:solid 1px green;
vertical-align:middle;
line-height:100px;
}
img
{
height:43px;width:43px;
vertical-align:middle;
}
</style>
DEMO
just add this class:
td *{
vertical-align:middle
}
Edit:
question is why when you add a pic to the td text goes bottom of pic and not any more middle of td.
this is my answer:
when you set td vertical-align to middle it should not set all content vertical-align to middle, they are still baseline. and when you add a pic to the text, the line height rise to the height of image and text is bottom of this height, so you need to set vertical-align to middle for fix this problem.
here you can see what i said: DEMO
and sorry about my bad english
Is this what you mean? http://jsfiddle.net/JFVNq/
The reason is spans are treated as inline so you need to make them block.
CSS for the span:
td.vert span
{
vertical-align: middle;
display: block;
}
I think we are all nearly there but
td img,
td span {
display:inline-block;
vertical-align:middle;
}
seems to work.
Codepen Example
Or am I missing something?
This CSS attribute doesn't go on any other kinds of elements. When the novice developer applies vertical-align to normal block elements (like a standard ) most browsers set the value to inherit to all inline children of that element.
You simply need to add vertical-align: middle to the <img> class.
Your CSS should look like this...
table
{
border:solid 1px red;
width:300px;
}
td
{
height:100px;
vertical-align:middle;
width:100%;
border:solid 1px green;
}
img
{
height:43px;width:43px;
vertical-align: middle;
}
You can view the Sample Fiddle...
Just move your vertical-align: middle from the span to the image.
The image will align itself on the text; works better than the opposite ;)
img
{
height:43px;width:43px;
vertical-align:middle;
}
http://jsfiddle.net/ZnpNF/1/
I have the following code that produces a background image in a table cell. I would like to put that image in the center of the cell.
<tr>
<td valign="top" width=<%=width%>>
<div id="loading"
style="background-image: url(spinner.gif); height: 16px; width: 16px;">
</div>
</td>
</tr>
I tried align=center but that didn't work and neither did text-align: center.
Centering your background image
You're looking for the background-position property.
You could also coalesce the properties into the shorter background property:
#loading {
background: url(spinner.gif) no-repeat center center;
}
Centering your element within your cell
One other reading of your question is that you want to center your loading animation in your table cell. If that's the case, I would encourage you to use the CSS properties text-align and vertical-align.
td.loading {
text-align: center;
vertical-align: middle;
}
With the following HTML
<td class="loading">
<img src="loader.gif" />
</td>
You can see a working demo online at http://jsbin.com/udehox/
it's worth noting that your DIV is a block element, and doesn't display inline by default. As such, you won't be able to "center" it, since it doesn't permit any space on its left or right.
You can force it to display as an inline element by attaching the display: inline or display: inline-block statements to it.
Try - background-position: center; that should do what you're looking for.
It looks like you are trying to center the div within the cell. You can set margins on the div or use relative positioning. Setting a background-position on the image won't help. The div is set to be 16x16 which I'm betting is the size of the image.
Try this one,
<tr>
<td valign="top" width=<%=width%> align="center" >
<div id="loading" style="background:url(spinner.gif) no-repeat center center; width:16px; height:16px;">
</div>
</td>
</tr>
I have an HTML table whose cells contain divs with display:inline-block, containing text of varying sizes.
I need the text to align on the baseline, and I need the background colors of the divs to fill the height of the cells. For the largest font, the background color does fill the cell, but it doesn't for the smaller fonts:
Is this possible? Obvious solutions like div { height:100% } seem to be scuppered by the varying font sizes.
Here's the code so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
table td {
vertical-align: baseline;
padding: 0;
}
td div {
display: inline-block;
}
</style>
</head>
<body>
<table>
<tr>
<td style="background-color:cyan">
<div style="background-color:pink;">Pink</div>
<div style="background-color:green;">Green</div>
</td>
<td style="background-color:cyan">
<div style='font-size: 40pt; background-color:yellow;'>
Big yellow text
</div>
</td>
</tr>
</table>
</body>
</html>
It's also on jsfiddle here.
Not perfect, but the closest I could get:
http://jsfiddle.net/gfPkV/14/
Quick and dirty fix:
CSS
div {
line-height:60px;
height:60px;
vertical-align:middle;
}
Demo: http://jsfiddle.net/2YbBg/
I read once, that td does not report it's height. So any height: 100% or height:auto, etc.. won't work.
So my solution is here: http://jsfiddle.net/UGTYP/
It changes height of "pink" text to the height of "yellow" div with javascript.