2009-11-19 15 views
5

イメージの隣に浮かべているときに小さなテキストを中央に配置するにはいくつかの問題があります。CSSを「浮動:右」にして縦方向の中心にする

<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などの再構成が望ましい)が好きです。問題を示している単なる例です。使用されているアプリケーションは非常に複雑で、すべてがテーブルに入っていればかなりの作業が必要になりますし、poうまく見えないだろう。

UPDATE

[OK]を、私は私が午前の問題を示して、私の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> 

大変申し訳ありませんが、私の問題の実例です。私は行の高さをトリックしましたが、ここで効果がないようです。基本的に私が望むのは、編集コントロールを画像の中央に垂直に中央に配置すること(テーブルのために簡単です)と、「電子メール」テキストを画像の中央に垂直に中央に配置することです。私はこの取り決めでは動作させることはできません。私は間違って何をしていますか?

+0

私はどこに行ったのか分かりません。しかし誰かが私が必要としていた 'padding-top'についてポストを作った。あなたはテキストアラインメントセンターを除いてそれが私を助けたのでそのポストを元に戻すことができます。実際、私は答えとしてそれを信じていました。 – Earlz

答えて

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> 

UPDATE:私は

<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 しかし、これを行うには、イメージをテキストから分離する必要があります異なるtdsに入れてください。

+0

これは私が必要としているものとまったく同じですが、実際のアプリケーションではうまく動作しない場合があります。 (これには​​の中に何か問題がありますか?) – Earlz

+0

最新の質問をご覧ください。多分あなたは私を助けることができます – Earlz

+1

私の更新された答えを見てみましょう。私はこれが役立つことを願っています –

0

これはあなたが探しているものかもしれません。

私はあなたが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> 
+0

それはそれの一部の部分を修正します。しかし、私は "This"をイメージの真ん中にあるようにイメージの横に垂直にセンタリングするようにセンタリングしたいと思っています(垂直方向) – Earlz

2

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

私はこれを水平にではなく、垂直にセンタリングしたいと思います。しかし、 "クリア:右;"私が必要としていたものです:) – Earlz

+0

ああ、スナップ、もっと注意を払う必要があります、申し訳ありません。 :) – Pascal