Getting CSS to "float: right" and vertically center
I am having some problems getting a small piece of text to be centered while floating next to an image.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<img src="logocss.gif" width="95" height="84" />
<div style="position:relative; top: 20px;">
This
</div>
<div>
Other stuff...
</body>
</html>
(You can copy and paste this code into http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float to see it in action.
What I would like is a way to vertically center the text while floating beside this image. and also not mess up text that comes after it. (as you can see, "Other Stuff..." is on top of "This")
I would prefer a pure CSS approach(or possibly restructuring of divs and such) because this is just an example showing the problem. The application it is being used in is very complex and having it all go into a table would require quite a bit of work, and possibly wouldn't look right.
UPDATE
Ok, I have ripped out part of my asp.net generated page that shows the problem I am having. I realize the code is ugly and apologize. It was generated by machine
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<table>
<tr>
<td>
<div style="line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
<span>This </span>
</div>
</td>
</tr>
</table>
Other stuff...
<br>
<br>
Actual application:
<br>
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 50px;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" /><span style="display:inline-block;color:Black;width:250px;">Email</span>
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Sorry for big code but its a working example of my problem. I did the line height trick but it seems to have no effect here. Basically what I want is for the edit control to be vertically centered in the middle of the image(which is easy because of the table) and for the "Email" text to be vertically centered in the middle of th开发者_StackOverflow社区e image. I can not make it work though in this arrangement. What am I doing wrong?
What about this? (note that the line-height value equals the image's height):
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="text-align:right;line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
Other stuff...
</body>
</html>
UPDATE:
Considering the updated code, I came up with this:
<div style="width:300px;">
<div style="width:300px;">
<input type="hidden"/>
<table border="0" style="border-collapse:collapse;border-spacing:1px;">
<tr>
<td style="width:250px;"><div style="line-height: 84px; width:250px; text-align:right;">
<input type="image" title="Calculate Field" src="logocss.gif" style="border-width:0px;float: right;" />Email
</div></td><td style="width:350px;"><table border="0">
<tr>
<td><input style="background-color:White;height:100%;width:300px;" /></td><td style="width:300px;"></td></tr></table></td><td style="width:300px;"></td>
</tr><tr style="height:0px;">
<td></td><td colspan="2" style="width:300px;"><span style="display:inline-block;height:0px;width:300px;"></span></td>
</tr>
</table>
</div>
</div>
I'm not saying it's the best way to do it, but I tried not to modify your code too much. You don't need to wrap the text in a span in my opinion.
If you want to stick to using tables, then try looking at the valign="middle" property of the td element : http://www.w3schools.com/TAGS/att_td_valign.asp But if you want to do that, you'll have to separate the image from the text and put them in different tds.
Slightly different solution than the one from Glennular. I'm not entirely sure how you want to do this, but the following centers the text This..., floats the image to its right (and it would wrap the text if it stretches to the image) and puts the Other stuff... below it.
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style="position:relative; top: 20px; text-align:center;">
<img src="logocss.gif" width="95" height="84" />
This
</div>
<div style="clear:right;">
Other stuff...
</body>
</html>
This might be what you're looking for.
I think you mean you want the image on the right side of the DIV. The float right will put it on the Right end of the container. Which has no size, ie. the whole screen.
<html>
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
<div>
<div style=" top: 20px;float:left;">
This
</div><img src="logocss.gif" width="95" height="84" />
</div>
Other stuff...
</body>
</html>
加载中,请稍侯......
精彩评论