I have this html in my email:
<li><h4>Sample Text 31 <small><img src="<link to image>"></small></h4></li>
The image is misaligned and the height width of the img tag is way bigger than the text size. See below
How can I keep the image to appear next to text and be of the same size?
To support most email clients, I would put this content in an actual table and you can use the valign attribute if you need to. valign doesn't seem necessary in chrome here, but it might be for outlook. You would add valign="middle" to the td's. You might also be able to put the text and image together in a single td and use valign="middle".
You should be able to nest a table in the li, or just use a table there instead.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size:40px;font-weight:bold;">Sample Text 31</td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" width="20" height="20"></td>
</tr>
</table>
You can display the li tag as a table and its children as cells. then vertical align the contents in the middle
snippet below
li {
display:table;
vertical-align:middle;
}
li *{
display:table-cell;
border:solid red;
vertical-align:middle;
}
<li><h4>Sample Text 31 </h4><small><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbmbMn9M5hlfXUXtw0a_ZsH3aS0HWvXT0eZiDeFauNmJOInHgm"></small></li>
Related
I have a table with multiple columns. In one of the column rows I want to add 2 elements which will be next to each other. One text element and one icon. The icon has a fixed with, the text element needs to be dynamic and has to be truncated with ... when the column cannot stretch anymore.
This is the HTML:
<table>
<tr>
<td>
</td>
<td>
<span>Truncated text goes here</span>
<i class="icn sprite icn-name></i>
</td>
<td>
</td>
</tr>
</table>
How do I do this? Using display: table; will make the HTML all buggy.
As said in comments, if you allow text and image to stay in adiacent cells, you can try the following.
<table>
<tr>
<td>Truncated text goes here</td>
<td><img src="imageURL" /></td>
</tr>
</table>
You can use vertical-align:top; in td style to align text on the top of the cell. And then you can use the following to set image width.
td>img {
vertical-align:top;
display:inline-block;
width:80px;
}
Fiddle
UPDATE
If you don't want to add extra cells to your table, you can create an internal div inside the cell, display it with display:table; property, and then display both span and img with display:table-cell; property.
Fiddle
I added the <i> element in front of the <span> element and gave the <i> element a float: right; and the <span> element the truncate styles.
Works fine now!
I am looking for some html help. How would I go about moving a text block centrally within a cell but also keeping their alignment left intact. I do not wish the text to be displayed all centered as I am going to be using an unordered list. I simply want the block of text to be moved in to the center of the cell.
Example of current scenario:
http://jsfiddle.net/AygnN/
<table id="sub-content" style="width: 100%;">
<tbody>
<tr>
<th>Departments</th>
<th>KPI Types</th>
<th>Bonus</th>
</tr>
<tr>
<td>
<ul>
<li>dfgsdgfdfg</li>
</ul>
</td>
<td>
<ul>
<li>sdfgsdfgsdfg</li>
</ul>
</td>
<td>
<ul>
<li>sdgsdfgsdffgsdgf</li>
</ul>
</td>
</tr>
</tbody>
</table>
If you have the <h1> tags as column headers, you should use actual table headers (<th> tags). Now, in the CSS you can say:
th { text-align:center; }
EDIT:
#sub-content td{ padding:0px 60px; }
and all table headers will be centered while all lists in the table will be aligned to the left.
This method is much more standard.
JSFiddle
You can put the text in a div and host the div inside the table cell. The text will follow the css style specified in div where as the div itself will be in center of the cell.
The example you have given does same kind of things. It rather divides the cell in multiple cells and put the text in the middle one.
When you create a basic HTML table everything seems to stay in center of the table. I don't want this how can i stop this from happening?
I wish to use a 2 column html table one for column for a sidebar one for content. Because i have so much content the sidebar text (which is little) gos to the middle of column.
How do i align the text to stay to the top left of the columns?
In the <td> element that contains the lefthand sidebar, try specifying a style that aligns text to the top:
<td style="vertical-align: top">(Sidebar HTML code here)</td>
You can control the alignment of columns directly in your markup by using:
<td style="text-align: left; vertical-align: top;"></td>
or even just
<td align="left"></td>
This will work fine for a 2-column table, but Piccolomomo has the better plan if you are going to use it a lot. This might help you further if you need it:
http://www.w3schools.com/html/html_tables.asp
You can use CSS to change text aligning inside your table:
td {
text-align: left;
vertical-align: top;
}
For aligning text in table you have to use css.Without css or any style sheet you can't make them align.So you can use inline css or external css for that.
<style type="text/css">
table td{
text-align:left;
vertical-align:top;
}
</style>
<table>
<tr valign="top">
<td align="left">
Side Bar
</td>
<td>
Content
</td>
</tr>
</table>
I have a table column like this, where I want to align an image and a text.
The text must be in the middle of the image.
<td><img height='50px' src='blabla'>Hello</td>
The above aligns the text at the bottom of the image.
I have also tried adding vertical-align:middle to the td style property, without luck.
I have also tried adding a <font> and styling that to vertical-align:middle without luck.
I know of one way, and that is adding another table column and having the text and image in separate columns, then it would be possible to align the text vertically in the middle, but I am trying to avoid this.
Any ideas?
You have to add the vertical-align to the img, not the td:
<td>
<img style="vertical-align: middle;" src="test.jpg"/>
test
</td>
To apply the style to all images in tds, use an external CSS:
td img {
vertical-align: middle;
}
Have you tried using valign="middle"
<td valign="middle"><img height='50px' src='blabla'>Hello</td>
Also, no need to add "px" to the height of the img.
Here you go:
<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>
http://jsfiddle.net/FDRy8/
use vertical-align:middle on the image and not the td
td img{
vertical-align:middle;
}
working example at http://www.jsfiddle.net/gaby/pPVtH/
Add vertical-align to the row as well, not just the cell.
I have an html table in which I am placing images side by side inside the td's. How can I get it so that there is no space at all between each image? By default all browsers seem to put in a small space despite 0 padding and margin on each table element. I am not specifying a width on the td's so by default it takes up the width of the image inside of it.
i.e:
<table>
<tr>
<td><img ... /></td> //no space between the td's
<td><img ... /></td>
</tr>
</table>
One more thing that can avoid unwanted space between images:
<td style="line-height:0;">
Apply this css:
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse; }
This resets all spaces to 0.
cellspacing and cellpadding should be 0 on the table.
<table cellspacing="0" cellpadding="0">
<tr>
<td><img></td>
<td><img></td>
</tr>
</table>
Take a look at cellpadding, border, and cellspacing attributes for the HTML table tag. If you are using XHTML or CSS, then check out the corresponding styles - border-collapse, padding, etc.
On my situation, I am trying to continue coding photoshop / imageready splitted html (generated via slice tool or save for web).
If table have a "height" attribute and you replace some images with shorter content, table maintain height adding mysterios gaps between images.
All I have to remove the height. Simple and stupid, but this is a situation can happen.