I am trying to lower the image to the middle of text inside of anchor element
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span>testttttt</span>
<img src="/test.jpg" style="padding-top:5px;">
</a>
</td>
as you can see the Image has style="padding-top:5px;" but instead of lowering the image only, it's pushing the text too.
I can't use float because its suppose to work on email clients.
Thanks for any help
Baaroz
Edited: just set the align attribute for you img element: align="middle"
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;'" href="">
<span >testttttt</span>
<img src="/test.jpg" style="padding-top:5px;" align="middle">
</a>
</td>
Apply vertical-align: middle; to your image...
<td width="356px" style="padding:0px;">
<a style="color:#094072;text-decoration:none;font-weight:bold;font-size:14px;" href="">
<span>testttttt</span>
<img src="/test.jpg" style="vertical-align:middle;" />
</a>
</td>
fiddle
Related
I want to display 2 images on the same row like this:
Image Same Text Image
If I put one image it works, but if I put both of them I get 404.
I think I am doing something wrong in the code I don't have much experience with HTML and don't know what I am missing.
The files are in same folder.
Here is the code:
<td colspan="8" >
<h1>
<img src="/home/apps/myapp/dynamic/img/myimage1.png" style="float:left; " alt="This is my mage" height="130" width="455">
<b>Same text</b>
<img src="/home/apps/myapp/dynamic/img/myimage2.png" style="float:right; vertical-align:middle;" alt="My second image" height="130" width="454"></h1>
</td>
simply you can use bootstrap..
divide the page into 2 halves using col-md-6 and put your data in its individual divs
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="/path1">
</div>
<div class="col-md-6">
<img src="/path2">
</div>
</div>
</div>
There is an extra start tag in your code, which is giving the error.
The Problem:
<<img src="/home/apps/myapp/dynamic/img/myimage2.png"
style="float:right; vertical-align:middle;" alt="My second image"
height="130" width="454"></h1>
The Solution
<img src="/home/apps/myapp/dynamic/img/myimage2.png"
style="float:right; vertical-align:middle;" alt="My second image"
height="130" width="454"></h1>
You can do by creating a nested table.
<td>
<table width="100%">
<tr>
<td>Image 1</td>
<td>Text</td>
<td>Image 2</td>
</tr>
</table>
</td>
or you can do by creating div with float attributes. Do image1 and text to float:left; and image2 to float:right.
I have a problem with images. The images are not floating, but it does work in the center. However, i want the images floating and center of the div.. Here is my code.
HTML
<div class="middle-align">
<div id="gallery-left">
<div class="gallery-left-middle">
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
<p class="gallery-photo"> <a rel="gallery_group" href="#" title=""><img alt="" src="assets/images/welcome.jpg" /></a> </p>
</div>
</div>
</div>
CSS
.gallery-left-middle {text-align:center;}
#gallery-left img{float:none;display:inline-block;width:180px;height:180px;}
I followed this question : Question solved. But it still doesn't work.
The problem is the images are not floating, but it's in the center. Any ideas?
It's because p is block element and it will automatically fill width of his parent div and because img has text-align:center, it is in center of that p element.
If you want to have those images floated, you can try set display:inline-block on those p elements instead of img elements.
.gallery-left-middle {text-align:center;}
.gallery-photo {display: inline-block;}
img{width:180px;height:180px;}
Working Fiddle
I have the following html..
<div class="container animate" data-animation="pulse">
<div class="margin30 "></div>
<h2 class="border-title">Powering payments for <span></span></h2>
<div class="margin25"></div>
<div style="display:table-cell;">
<div>
<img src="images/clientlogos/pappa.png" title="" width="170" height="88" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/offergrid.png" title="" width="215" height="55" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/index.png" title="" width="121" height="33" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/fudr.png" title="" width="156" height="65" style="margin-left:5px;">
</div>
<div>
<img src="images/clientlogos/inloc8.png" title="" width="139" height="39" style="margin-left:5px;">
</div>
</div>
</div>
Can someone tell how could I arrange all the divs having images in a horizontal line.I want all the images in one line
div, img {
float: left;
display: inline-block;
}
float: left on your divs is one option:
http://jsfiddle.net/c3DV3/
Since you are only storing images in your div, you should check if it's better for you to use the <img> tag or to set them as a background-image, as stated in this post. It mainly depends on what you are going to do with those images. Check the link for further informations.
Floating the divs on left like others already said is the proper way to do it. You could also use display:inline-block; (even if divs are rendered as blocks by default).
Personally I didn't get if you wanted just to display them on one line, or to align them on top: in this case, you can use vertical-align:top; in addition to the other CSS parameters to achieve the result.
I want to show this four images without any margin. How to do this?
Each A,B,C,D look like one image.
A
B
C
D
<div align="center">
<img src="a.png">
<br/>
<img src="b.png">
<br/>
<img src="c.png">
<br/>
<img src="d.png">
</div>
I tried css margin=0 and style padding =0 but it is not working.
Update---
<img id="ImgEmotion" src="a.png" width="40" border="0">
<img src="b.png" width="20" height="20" border="0">
If I use css, I know there are no margin.
If I use #no_margin, how can I apply to img tag? Also I need the 'id='ImgEmotion'.
CSS:
img
{
margin:0;
display:block
}
HTML:
<div align="center">
<img src="a.png">
<img src="b.png">
<img src="c.png">
<img src="d.png">
</div>
JSFIDDLE
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+...