Obtenir CSS “float: right” et à la verticale du centre de

Je vais avoir quelques problèmes pour obtenir un petit morceau de texte à centrer tout en flottant à côté d'une 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>

(Vous pouvez copier et coller ce code dans http://www.w3schools.com/CSS/tryit.asp?filename=trycss_float de le voir en action.

Ce que je voudrais, c'est un moyen de centrer le texte verticalement tout en flottant à côté de cette image. et aussi pour ne pas gâcher le texte qui vient après lui. (comme vous pouvez le voir, "d'Autres Choses..." est au-dessus de "Ce")

Je préfère un pur CSS approche(ou éventuellement de restructuration de divs et par exemple) parce que c'est juste un exemple pour montrer le problème. L'application, il est utilisé dans le est très complexe et qu'il vont tous dans une table nécessitent un peu de travail, et, éventuellement, de ne pas regarder à droite.

Mise à JOUR

Ok, j'ai arraché une partie de mon asp.net page générée qui montre le problème que j'ai. Je me rends compte que le code est moche et m'en excuse. Elle a été générée par la 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>

Désolé pour le code, mais c'est un exemple de travail de mon problème. J'ai fait la hauteur de la ligne d'astuce, mais il ne semble pas avoir d'effet. Fondamentalement, ce que je veux, c'est pour le contrôle d'édition sera centrée verticalement dans le milieu de l'image(ce qui est facile en raison de la table) et pour le "e-Mail", du texte à la verticale centrée au milieu de l'image. Je ne peux pas faire ce travail même si, dans cet arrangement. Ce que je fais mal?

Eh bien, je ne suis pas sûr de l'endroit où ils sont allés. Mais quelqu'un a fait un post sur padding-top qui est exactement ce dont j'avais besoin.. Vous pouvez récupérer le poste en cause, il m'a aidé à l'exception de l'text-align center. En fait j'avais de crédit comme la réponse.

OriginalL'auteur Earlz | 2009-11-19

  1. 2

    Quoi à ce sujet? (notez que la hauteur de la ligne de la valeur est égale à la hauteur de l'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>
<div style="text-align:right;line-height:84px;">
<img src="logocss.gif" width="95" height="84" />
This 
</div>
Other stuff...
</body>
</html>

    Mise à JOUR:

    Compte tenu de la mise à jour du code, je suis venu avec cette:

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

    Je ne dis pas que c'est la meilleure façon de le faire, mais j'ai essayé de ne pas modifier votre code de trop.
    Vous n'avez pas besoin de mettre le texte dans un span à mon avis.

    Si vous voulez coller à l'aide de tableaux, puis essayer de regarder les valign="middle" propriété de la td élément : http://www.w3schools.com/TAGS/att_td_valign.asp
    Mais si vous voulez le faire, vous aurez pour séparer l'image du texte et les mettre dans différents tds.

    C'est comme exactement ce que je suis besoin.. mais j'ai du mal à la faire fonctionner dans mon application réelle maintenant.. je vais laisser cette question ouverte til je l'ai trouver. (Cela aurait-il des problèmes à l'intérieur d'un <td> ?)
    Veuillez voir ma mise à jour de question. Peut-être que vous pouvez m'aider
    Jetez un oeil à ma mise à jour de réponse. J'espère que cette aide.
    C'est, en fait, toujours pas de travail dans mon application, même mon changement de balisage à l'air presque exactement comme ça.. je ne comprends pas qu'est-ce que tout gâcher.. c'est trop localisé pour garder cette question ouverte si, et c'est exactement ce que je suis besoin..
    Oh, attendez. J'ai corrigé.. La réelle hauteur de l'image que j'utilise est 32px. Eh bien, si vous faites ce 50px, qui vont casser la mise en forme.. Et j'étais encore à l'aide de 50px, juste pour voir si elle avait un effet.. donc oui...

    OriginalL'auteur Guillaume Flandre

  2. 2

    Légèrement solution différente de celle que l'on Glennular. Je ne suis pas entièrement sûr de savoir comment vous voulez le faire, mais les centres suivants le texte Ce..., flotte l'image de son droit (et il serait le texte à la ligne si elle s'étend à l'image) et met le d'Autres choses... ci-dessous.

    <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>
    Je suis désireux de cette centrée verticalement, et non horizontalement. mais le "clear:right;" est quelque chose que j'avais besoin 🙂
    Oh, snap, devraient prêter plus d'attention, désolé. 🙂

    OriginalL'auteur Pascal

  3. 0

    Cela pourrait être ce que vous cherchez.

    Je pense que vous voulez dire que vous voulez que l'image sur le côté droit de la DIV. Le flotteur droit de le mettre sur le Droit du conteneur. Qui n'a pas de taille, c'est à dire. la totalité de l'écran.

    <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>
    Qui résout sorta de la partie. Mais je veux pour "Ce" pour être centré, de sorte que c'est centrée verticalement à côté de l'image, de sorte qu'il est dans le milieu de l'image.(verticalement)

    OriginalL'auteur Glennular