Question

我遇到一些问题，让一小段文字在图像旁边浮动时居中。

<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等），因为这只是一个显示问题的例子。它正在使用的应用程序非常复杂，将它全部放入表中需要相当多的工作，并且可能看起来不正确。

更新

好的，我已经删除了部分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>

对不起大代码，但它是我的问题的一个有效例子。我做了线高技巧，但似乎没有效果。基本上我想要的是编辑控件在图像的中间垂直居中（由于表格很容易），并且“电子邮件”文本在图像的中间垂直居中。虽然在这种安排中，我无法使其发挥作用。我究竟做错了什么？

Answer 1

与Glennular的解决方案略有不同。我不完全确定你想要怎么做，但是下面的文字这... 的中心，将图像浮动到右边（如果文本延伸到图像，它将包裹文本并将其他东西...... 放在它下面。

<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>

Answer 2

这个怎么样？（请注意，行高值等于图像的高度）：

<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 但是如果你想这样做，你必须将图像与文本分开并将它们放在不同的标签中。

Answer 3

这可能就是你要找的东西。

我认为你的意思是你想要DIV右侧的图像。右边的浮动将它放在容器的右端。哪个没有尺寸，即。整个屏幕。

<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>

让CSS“浮动：向右”并垂直居中

3 个答案: