Ear*_*rlz 5 html css css-float
我有一些问题,让一小段文字在图像旁边漂浮时居中.
<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>
(您可以将此代码复制并粘贴到http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float中以查看其实际效果.
我想要的是一种在浮动图像时垂直居中的方法.而且也不会弄乱它之后的文字.(正如你所看到的,"其他东西......"在"这个"之上)
我更喜欢纯CSS方法(或者可能重组div等),因为这只是一个显示问题的例子.它正在使用的应用程序非常复杂,将它全部放入表中需要相当多的工作,并且可能看起来不正确.
UPDATE
好吧,我已经删除了我的asp.net生成页面的一部分,它显示了我遇到的问题.我意识到代码是丑陋的道歉.它是由机器生成的
<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>
对不起大代码,但它是我的问题的一个工作示例.我做了线高技巧,但似乎没有效果.基本上我想要的是编辑控件在图像的中间垂直居中(由于表格很容易),并且"电子邮件"文本在图像的中间垂直居中.虽然在这种安排中,我无法使其发挥作用.我究竟做错了什么？
那这个呢？（请注意，行高值等于图像的高度）：
<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>
更新：
考虑到更新的代码，我想出了这个：
<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>
我并不是说这是最好的方法，但我尝试不过多修改您的代码。我认为您不需要将文本包装在跨度中。
如果您想坚持使用表格，请尝试查看 td 元素的 valign="middle" 属性：http://www.w3schools.com/TAGS/att_td_valign.asp 但如果您想这样做，您'必须将图像与文本分开并将它们放在不同的 td 中。