How can I put an <img> next to a <div> so the image vertically aligns in the middle?
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
I know how to do it using a table:
<table style="font:10pt Arial">
<tr>
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"></td>
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
</tr>
</table>
But I wonder if I could do it without a table.
Thanks in advance!
Rain Lover
To be honest from your example I have a feeling you may be taking slightly the wrong approach for this.
Personally I would attach this icon to the div as a CSS background-image. Afterwards, you could apply padding to the left of the div equal to the width of the image (plus a few more pixels for spacing). Then, you will be able to use background-position to do something like this:
background-position:0px center;
This will give you the higher degree of control that I think you're after.
With block elements such as img and div, you cannot position them vertically in the centre of something without actually having a something (element) to vertically centre them inside of.
Having said that it is still not possible aside from using some sort of hack. The far simpler method would be to use a relative position on one of the elements and offset its position such that it visually creates the same effect, or use a margin/padding to do the same.
It can be done the following way. There is no easy way to center unless you have it inside an element with a specific height and can be played with. This can be viewed at http://jsfiddle.net/jawilliams346614/CvpUB/1/
<div>
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left; padding:5px;">
<div style="font:10pt Arial;padding:5px;background-color:#ccc;">
<span style="float:right">No. 1</span>
<span style="font-weight:bold;padding-right:10px;float:left;">John Doe</span>
<span style="color:#808080">11/14/2010 3:23:44</span>
</div>
</div>
now if you increase your font size, you will have to change padding to:
padding-top: 5px; // change in sync with bottom to center in text
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
Related
I have a div that is width 100%: Inside that div I am trying to float the image to the right.
<div class="card-panel valign-wrapper "
style="height: 50px; width: 100%; position: fixed; top: 290px;
background: white; z-index:3; ">
<h5 class="valign" class="right-align">Beer Menu</h5>
<img id = "moreInfo" style="vertical-align: middle; float: right" src="img/more.png"
height="30" width="30">
</div>
I have been playing with chrome inspect element trying a bunch of different ways to float the image to the right end of the screen and leave the text to the left but not working.
Here is an image with surrounding code:
Couple suggestions:
Use a separate CSS file. It will be easier to keep track of your CSS. Different rules might be taking precedence and it will be more clear if you use a separate file. It will also be easier to debug your CSS issue.
I am not sure why you have your with Beer Menu as a part of the class "right-align". Arent you aligning this left and trying to align the image of the three dots right? This is a little confusing.
You can always try the "right:0px;" CSS rule. I cant help you code something that works perfectly without being able to try it myself but that could solve your problem. You could also give "position:absolute;" a shot
Just be sure to clean up your CSS and it will all become easier.
EDIT:
Its not the best but adding this to your image worked for me:
right: 0px;
top: 10px;
position: absolute;
by just looking at that screenshot, you might try to give your img a position of relative. that generally fixes float problems. but don't forget to clearfix your parent element so the div doesn't collapse on itself.
I would also recommend not positioning everything as fixed, usually run into responsive issues with that unless initially positioned by JS, if so, my bad.
but with float issues, its usually positioning that screws it up.
good luck!
This is what I did, and it worked in my browser:
<h5 class="valign right-align" style="float:left">Beer Menu</h5>
While rest of the code remains the same.
Try putting them in a table and align the column content to right. Something like
<table style="width">
<tr>
<td><h5>Beer Menu</h5></td>
<td align="right"><img /></td>
</tr>
I am having code like this
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%">2</span>
</div>
currently it is showing like this.
here padding right is not working. it should be such that 2 should be having 10% padded from right of this div.
Is there any other style tag which can do give such padding from right.
by default, inline elements are rendered left to right aligned, unless you specify float property for them.
That means, in a given horizontal line, first span T1 will be rendered adjacent to the left border of the parent and then span 2 will be rendered adjacent to span T1.
so, your padding-right is never being utilized, as the last span is already far away from right border, unless you make it to move right either by float:right or giving it a margin
try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style=" float:right; padding-right:10%;">2</span>
</div>
see this fiddle
This will give the desired effect
<span style="float:right; margin-right:10%">2</span>
Use this:-
<span style="float:right; padding-right:10%">2</span>
Good explanation by above contributors, but you can also try this:
<div style="background-color: greenyellow; color: black">
<span style="padding-left:20%">T1</span>
<span style="padding-right:10%;padding-left:60%">2</span>
</div>
Infact, this is about how you take the structure of your CSS, if we consider Left to Right precedence which Manish mentioned, we can also adjust our requirement by inserting a left padding of 60%.
So, this problem can be solved in both ways, if you want to adjust something in between "T1" and "2" you should use mine one, otherwise both are fine.
Hope you got it.
Let's say I have an Image.
<img src="lala.png" />
This image has a width=400px;.
and I want to type "Lala" under this Image.
<img src="lala.png" />
<br>
<span>Lala</span>
Note that I'm gonna be fetching those images and those texts from a database, the width of the images is fixed at 400px, but of course the texts will vary in size, so I can't use margin-left:100px; to push the text to the middle because It will look wrong on other texts...
What is the best way to do it?
You can use a div instead of span.
HTML:
<div class="underImage">Blah</div>
Style:
.underImage {
width: 400px;
text-align: center;
}
you can do this by text-align:center;
<div style="text-align:center;">
<img src="lala.png" />
<br>
<span>Lala</span>
</div>
Just wrap the image and text in an element and use the text-align CSS attribute on the wrapping element.
HTML
<p class="center-wrapper">
<img src="lala.png" />
<br>
<span>Lala</span>
</p>
CSS
.center-wrapper { text-align: center; }
There are several ways to achieve that, but the most flexible and most effective way is to use a one-cell table, with the caption text in a caption element:
<table class="image">
<caption align="bottom">caption text</caption>
<tr><td><img ...></td></tr>
</table>
There are many people who oppose such use of a table on quasi-religious grounds, but it’s still the flexible way that does not require you to set the width of the text explicitly (as opposite to letting it be determined by the width of the image) and works independently of CSS support.
I have been trying to align the "Low" text and arrow that I showed on image. Basically want I is to align the text and the arrow (Low) some pixels below the blue chart. i.e. chart 3.
I'm generating those blue bars from my database and creating a table. Here is the code:
.lower {
display: block;
font-size:7pt;
color:#666666;
position:relative;
bottom: 5px;
left:-25px;
}
<td valign="bottom" style="width:8px;height:20px;"
<div style="padding: 0px;width:8px;height:" . round($var/2.5) . "px;background-position:bottom;background-repeat:no-repeat; display: block;">
<div class="lower" >Low <img src="icon-sort-up.png" />
</div>
</div>
</td>
The round($var/2.5) that one calculates my high to align my "High" text and arrow but somehow is affecting my Low text.
a busy cat http://sandbox.visistat.com/partner-reports/live3/pulse.png
You are nesting your "lower" div into your "high" div, that is why the round($var/2.5) is also affecting your "lower" div. Since the round($var/2.5) is written inline instead of in a seperate CSS file it will disregard anything that was in your css file and take the inline style instead.
To prevent this you can either place the "lower" div below the first div instead of nesting inside it.
Also you are not closing your opening td tag in your code example, although that might be a typo.
I've set float for one of my table's cells. But now I can't change vertical alignment of it's contents. By default, it moves the contents to the top of the div. I tried valign: middle, vertical-align: middle with no success. Here are the results:
With float: left
Without float: left
How can I align vertically cell's contents with float?
And markup looks like that
<td id="top_logo">
<a href="index.php">
<img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
</a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>
I don't know if this will help (I've left Table based layouts behind now) , but to solve a similar issue using straight divs you can do the same using the line-height rule.
<div id="tableRow">
<div id="leftCell"><img src="mylogo" /></div>
<div id="middleCell"> </div>
<div id="rightCell">User Name Here</div>
</div>
Your CSS would be created to set widths/heights etc, which I guess you won't need for a table, and for your "rightCell", you'd set the line height to be the same as the row height:
#rightCell
{
height: 30px;
line-height: 30px;
}
What then happens is the text is centred vertically in the line space, which because it's the same as the height, gives the impression it's in the centre of the element too.
Now like I say, I've NEVER tried this on a table-cell, however any modern browser should let you change the display property to say block or inline-block using:
display: block;
Changing block for any of the other types where needed. This will set the display type of the cell to be like a div (or a span, or some other element) but I DON'T KNOW what effect it will have on the table.
Note also, that I'm not addressing older browsers Like IE6 here, to make this work across the board you may have to make some hacks for older browsers if support is required.