让 CSS 变为“float: right”并垂直居中

发布于 2024-08-11 15:08:15 字数 2849 浏览 2 评论 0原文

我在将一小段文本浮动在图像旁边时使其居中时遇到一些问题。

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

抱歉代码很大，但它是我的问题的一个工作示例，但它在这里似乎没有效果。。基本上我想要的是编辑控件在图像中间垂直居中（由于表格，这很容易），并且“电子邮件”文本在图像中间垂直居中。但在这种安排下我无法让它发挥作用。我做错了什么？

原文

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 the image. I can not make it work though in this arrangement. What am I doing wrong?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

锦上情书 2024-08-18 15:08:15

这又如何呢？（请注意，行高值等于图像的高度）：

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

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.

回复收藏 0 原文

無心 2024-08-18 15:08:15

与 Glennular 的解决方案略有不同。我不完全确定你想如何做到这一点，但以下内容将文本 This... 居中，将图像浮动到右侧（如果文本拉伸到图像，它将包裹文本）并将其他内容...放在其下方。

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

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>

回复收藏 0 原文

吃不饱 2024-08-18 15:08:15

这可能就是您正在寻找的。

我认为您的意思是您希望图像位于 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>

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>

回复收藏 0 原文

~没有更多了~