イメージの隣に浮かべているときに小さなテキストを中央に配置するにはいくつかの問題があります。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>
大変申し訳ありませんが、私の問題の実例です。私は行の高さをトリックしましたが、ここで効果がないようです。基本的に私が望むのは、編集コントロールを画像の中央に垂直に中央に配置すること(テーブルのために簡単です)と、「電子メール」テキストを画像の中央に垂直に中央に配置することです。私はこの取り決めでは動作させることはできません。私は間違って何をしていますか?
私はどこに行ったのか分かりません。しかし誰かが私が必要としていた 'padding-top'についてポストを作った。あなたはテキストアラインメントセンターを除いてそれが私を助けたのでそのポストを元に戻すことができます。実際、私は答えとしてそれを信じていました。 – Earlz