This is how the text looks at the moment
HTML:
<td style="vertical-align:middle;">
<img src="~/Images/Cancel.png" style="width:80px;height:80px" id="btnCancel" />
<span style="color:White;font-size:27px;font-weight:bold;">CANCEL</span>
</td>
How can I vertically align the text next to the image so it's in the middle?
You could remove the vertical-align:middle; from the table cell and apply that CSS declaration to both <img> and the span> element, as follows:
<td>
<img src="http://placehold.it/100" style="width:80px;height:80px;vertical-align:middle;" id="btnCancel" />
<span style="color:black;font-size:27px;font-weight:bold;vertical-align:middle;">CANCEL</span>
</td>
WORKING DEMO.
That's because the inline elements themselves are aligned in their baseline by default.
Try giving float:left in css:
<img src="~/Images/Cancel.png" style="width:80px;height:80px; float:left" id="btnCancel" />
<span style="color:White;font-size:27px;font-weight:bold; float:left margin:5px 0 0 5px;">CANCEL</span>
If you make both the image and span display:inline-block you will be able to user vertical-align: middle.
<td style="vertical-align:middle;">
<img style="display: inline-block; vertical-align:middle; width:80px; height:80px" src="~/Images/Cancel.png" id="btnCancel" />
<span style="display: inline-block; vertical-align:middle; color: White; font-size: 27px; font-weight: bold;">CANCEL</span>
</td>
<td style="vertical-align:middle;">
<img src="~/Images/Cancel.png" style="width:80px;height:80px;float:left" id="btnCancel" />
<span style="color:White;font-size:27px;font-weight:bold;float:left; padding:24px 0 0 0">CANCEL</span>
</td>
Related
I have an outer div 'draggable', If we write a very big content, it automatically gets expanded, but the span width remains fixed.
HTML
<div id="draggable" class="ui-widget-content" style="word-break: keep-all">
<span class="too" >
<div id="symbol" style="POSITION: relative;float:right;">
<span class='switch-icons'>-</span>
<a id="switch"><img id="img1" src="images/minus.png" alt="minus" height="15" width="15" ></a>
<a onclick="javascript:closeFullScreenView()"><img src="images/close-bt.png" alt="close" height="15" width="15" ></a>
</div>
<p class="ui-widget-header" style="FLOAT: left">
FileNo.:
<s:property value="fileNo"/>
</p>
</span>
<div id="ajaxContent" style="overflow-Y:auto;">
</div>
</div>
CSS
.too {
width: auto;
display: block;
float: right;
}
The span having class 'too' is not expanding accordingly. I have tried float as well, but its not working.
I tried this and it is working fine for me. It may be some other styles in your code causing this issue. Could you please post a fiddle , so that we can check more on this.
I have a <form> containing several <input /> fields. On some of these fields I have added a calendar widget for selecting a date - that is working without any problems.
html {
margin: 0px;
padding: 0px;
}
.img {
width: 20px;
height: 20px;
position: relative;
top: 5px;
}
<h1>Example #1 (table)</h1>
<table>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</td>
</tr>
</table>
<h1>Example #2 (div)</h1>
<div>
<input />
<br/>
<input />
<br/>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</div>
My problem is a calendar icon next to the <input /> field. The height of all rows containing the calendar icon are increased by a few pixel:
How can I prevent this? I already set the width and height of the <img> to 20px and the <img> isn't higher than the <input />.
Unfortunately I have to change the position of the <img> otherwise it would be starting a few pixel above the <input />.
Instead of using position:relative; top:5px; on your image, use vertical-align:middle; on both the input and the img.
The vertical-align rule determines how inline elements of different heights should be positioned vertically on a line. The input and img elements have different vertical aligns by default, which is why you need to set it manually to achieve your desired effect.
Using top:5px pushes the image down by 5px from the top, which resulted with extra space between your lines. So remove that bit. Using top to center elements vertically is a bad idea anyway, as you may have images that are of slightly different sizes and it is more prone to getting disaligned again when more elements are introduced.
Demo:
html {
margin: 0px;
padding: 0px;
}
img {
width: 20px;
}
img, input{
height: 20px;
vertical-align: middle;
}
<h1>Example #1 (table)</h1>
<table>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
</td>
</tr>
<tr>
<td>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</td>
</tr>
</table>
<h1>Example #2 (div)</h1>
<div>
<input />
<br/>
<input />
<br/>
<input />
<img class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAADXElEQVR42rXUy4/bVBQG8NmwYVMkNghVQiBgAQukLvh3WIBAgOgOsWEBu4oVC1ggBAIEFFRAGihUVJ0yTdxOM5mkedhOMomdtx/X79iJU2eSr+fa08BkRuxq6VOUG+Wnc33OvVtbj+KRq3ffqZWE7ep+breyn9up8hz8f2oPU8zt1ku3/5AqhffWIMdso49kPkMcLzCLE0xnCSJKOE0woQRRAj/M4lHcSQKH4voT6KMuCL26BnllHAMSLKwDJKyIuVlArO9hqt1GNMojHN5C0P8HfvcmXPUGnM512J2/YbsOHC8AVXprDfJt8soWdgnWz8/DuvISfb4IdvlZsB/Og33/FMzvnoT5zTmYXz8O46vHoH+5Bf2zLRita2B+gvpB/uZ/K9zh20ysEuzfLsDPvYFAeBtB/q2NvJmFfvN3X4PxBaHNv2B69zdAern8nc3NfbCfnoO3/WoKO7++AueXl9NqnSsvwLr8DKwfz1OehvntEzCpQq1xFYZLYGkDDMMQi0hHJH2OvnAJfuVTWIVLGOU/Qlj5BL2d9+Htfwwz/wGGNy5iUvwQ3T9fR1+pwbAnp8GJ72BJbVlR5F6AmL5YwRHU8QT8kdoa4iOAeTGUAcvWGh10Ri4Mk50GA8/BgpDlcolGZ0Cjcx+W7aDbG2K1WkGWZcxmMzBTh9Jp0doScu0A7T6DblqnQZ/A5OgYPOwSOAezbKi9fgZKYgYaGpR2IwOrBRz2DGiGBXET9Fwb88Ux2FIykDGo3W76Z0mqEjglcAzlUE7XGgS2ugbG+hmg69igyTkG2wTGBJpQVSUD6/cwmxKojwgU12BD1THSGYHCSdAhkCYn216zSUdwDouDSidrQK2EmCq0jBHUw3q61qgVICsahtoGyA+5Y1uI4hWSJEkbEEURDL69ThOLRQKpWkQ4CWBofSitWrrGK5QV/WzQpTPJ50mWJYj1KjWhStssQ6wU026K5TvUhLuQKnsQ791JMbEs0JaNM8BSbtfzPLAgwUD3MDA89MY0MmPq8shKR6NNs8cb0KQ0KLwyjjWHIb1DPjbCv5dDrSxsa3QFOa5Ls2en42IyGwaz0hnj4aPBu8kbwCt6GI4N+urJ64u28G69LPzOryB+yNOUTkZcRzgRXhnH6uW9i4/k9n8AX5hil9Pvm0cAAAAASUVORK5CYII="
/>
</div>
If you want answer then use this code :
<style>
html {
margin: 0px;
padding: 0px;
}
.img {
float:left;
margin-left:4px;
}
.inpt_cls {float:left;}
</style>
To have icon in same line, use float:left on both element so they will be in one line and replace <input /> this to <input class="inpt_cls"/> so particular css will apply on input class.
and you will get what you want. Hope it help or let me know if there is any issue. Ty
Im trying to put a text and an image side by side, but the text have to be aligned at the bottom but nothing is working, im using twitter-bootstrap and this is the code:
<td width="75%" style='padding-top: 50px' height="100%" >
<img src="img/img.png" class="img-responsive "
style="display:inline-block;margin-left: 10px;float:right;margin-bottom: 40px"
width="60%" alt="">
<span style="vertical-align:bottom;float:right">test</span>
</td>
http://jsfiddle.net/zh1o6tuc/
Thanks.
EDIT:
This is what im trying to achieve http://postimg.org/image/ss7u8u6mh/
You'll need to make a few changes to HTML and CSS:
Move span to before the image in HTML
Remove float: right; from the span in CSS
Add display: inline-block; to the span in CSS
img {
display: inline-block;
margin-bottom: 40px
margin-left: 10px;
}
span {
display: inline-block;
vertical-align: bottom;
}
<table>
<tr>
<td width="75%" style='padding-top: 50px' height="100%" >
<span>test</span>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwwMDQwMDA0MDAwMDAwMDAwMDA8MDAcMFBEWFhQRFBQYHCggGBolJxQUITEhMSkrLi4uFx8zODMsNyg5OjcBCgoKDA0NDwwMDysZFBkrLCsrLCwrLCsrKysrLDcsKysrKys3LCsrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAFhABAQEAAAAAAAAAAAAAAAAAAAER/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAMAwEAAhEDEQA/AOI1AbUAAAAABAUAAEUAEUBAUEUARRAUAAAAADAALFQAAARQAABFAQAAABUAFQABQAAAAAAAAFAKgACKgKgoAICoAKIAAAAAAAAACoAACiKAABogCgAAAAAIAAAAAAAgEKAAKAAqACiKAIoAAIqAKAAACAAAAAAAAAIgAoACgCIAKoACgAigCAAoACAgqKlUABABAAAAAAAAAAFAFABBRBRQARUUAAAABKqAACACAAAAAAAAoAIoAAAAAoKiggALQQFAARUAAQAAABAAAAABQARQAABQVFARQEVAFABFAEFQAAABEAFABAAAAAAAAAgCqAAKAIKAAAIoCCgIKgAAAAACIAAAAAKoAAoAgAKACAoAAAAIKAgqAAAAAAAACAAoAACgAACKCKAICgAAAAiooCKgCoAAAAAAAAAAoAAAAAAAAGgACgIAACAqKAAAgoCCgIqACoAAAoAIoAAAAAogCoooIKggAAAIoACKAAAACCgAIAoAAQChQFQVQABFAABBKQAKKAkFAZWACAAAALAAKoDIACgBVAEUFAAH/9k=" class="img-responsive " width="60%" alt="">
</td>
</tr>
</table>
Try clearing the float.
Check http://jsfiddle.net/w4ucrk2p/
Use this next to the image tag,
<div style="clear:both"></div>
EDIT :
If you want the text beside your image, include the span element first inside the <td> and then followed by the image. Like,
http://jsfiddle.net/qr18rLd6/
I am coding in html-email. There is a <td> with inline CSS code. What I have to do for attach an anchor tag on whole <td>. Please tell me how can I do it. I have tried many options but these are not valid.
<td valign="top" width="204" class="leftColumnContent" mc:edit="left_column_content" align="center" bgcolor="#dee0e2" style="border-left:6px solid #FFF; border-top:5px solid #FFF;"">
<div align="center" style=" margin-top:10px;">
<img src="" width="119" height="199" style="max-width:180px;" mc:label="image" />
</div>
<p style=" margin-left:20px; width:80%; font-family:Arial, Helvetica, sans-serif; font-size:14px;"> <strong>Text here </strong><br />
<br />
text here</p>
<div style="width:80%; margin-top:10px; margin-left:20px; margin-bottom:15px;">
<div align="left" style="float:left;"><strong> read more</strong></div>
<div align="right">
<img align="none" height="20" id="headerImage2" mc:allowdesigner="" mc:allowtext="" mc:label="header_image" src=".." style="max-width: 55px; width: 55px; height: 23px;" width="55" /></div>
</div>
</td>
You cannot have <a ...><td>...</td></a>, by HTML rules. You can nest them the other way around, <td><a ...>...</a></td>. If you need to make the entire cell clickable, then you need to style the a element so that it occupies the entire cell. The way to do that depends on context, but if the td element has fixed dimensions, then set the following on the a element inside it:
display: block; height: 100%;
you can use the onclick property at the place of Anchor Tag in your table (code).
the Table example is as follows
<table>
<tr>
<td onclick="javascript:alert('your HTML');">HTML Code is here</td>
</tr>
</table>
at the place of alert("") you can use window.location("")
for send the page redirection on another page.
Here's the rendered html:
<div style="padding-left: 50px; vertical-align: middle;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
general css:
div {
font-size:smaller;
padding:5px 5px 0 0;
float:left;
}
Here's what the design looks like in firebug:
I would like the text NONE to align at the top, just the way the image (checkbox) is aligned. Any ideas on how to do this with css?
vertical-align: middle doesn't do what you think it does.
<div style="padding-left: 50px;">
<strong style="float: left;">NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
Couple of things:
Since you know the height of your image, to get the exact alignment you want, try setting a line-height. You can set it at 15px or 1 (just 1, no unit), and see which you prefer.
Change your value for vertical-align. It's meant to control the vertical alignment of two inline (or inline-block) items next to each other. Which is what you have when you have strong next to img, it's just that middle doesn't look the way you want. Other values that work reasonably well cross-browser are baseline, top, bottom and sometimes text-top or text-bottom.
Beyond that, you can set both the img and the strong to block and use float, height, and padding.
Examples:
<div style="padding-left: 50px; line-height: 15px;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
<div style="padding-left: 50px; vertical-align: top;">
<strong>NONE</strong>
<img height="15" width="15" src="images/Checked.gif" alt="">
<br>
<span style="font-size: larger;">DEFAULT</span>
</div>
Others have already down an example with floats.
The issue is that the line height on the top is going to conform to however high your image is. To compensate, you can put the "none" text in a block element, and then set your alignment in there. Here would be an example:
<div style="padding-left: 50px; vertical-align: middle;">
<div style="height:15px; width:50px; float:left;">NONE</div>
<img style="height:15px; width:15px; float:left;" src="images/Checked.gif" alt="" />
<br style="clear:both;" />
<span style="font-size:larger;">DEFAULT</span>
</div>
From here you can play with the padding and alignment within that div around the none text.
These answers didn't work for me, here's how I got it working...
<div style="line-height:0px;">
<span style="vertical-align:middle;">test</span>
<img src="myimage.png" style="vertical-align:middle;" />
</div>
give the container element (in my example, the <div>) element a line-height attribute value of 0px; then everything you want on the line should have a vertical-align:middle; style applied.
Tested in Chrome, FF, IE7+...