<span>のテキストを画像に揃えるには、境界線が不明な別の<span>があります。

Question

<div>には、2つがある。<span>。一つは横に

http://chart.apis.google.com

他<span>からQRコードの画像を引き込むQRをダウンロードするためのリンクとテキストだけです。デザイナーは、ダウンロードリンクがイメージの下部に揃うと想定していましたが、イメージには未知の境界があります。視覚的に正しいものにするためには、これが試行錯誤を意味することを理解しています。

パディングとマージンを追加しようとしましたが、両方とも<span>ビットを送信しました。私は視覚的な参照のための赤いアウトラインを追加しました

.qr_image { position:left; outline: 1px solid red ; } 
.qr_download { color: #1d8cd2; text-decoration: underline; outline: 1px solid red; } 

Answer 1

デフォルトでは、イメージはHTML仕様の下の境界にあるテキストと揃います。

テキストを右端に合わせて一番下に並べてイメージを作成する必要があります。これはあなたが望むものではありませんか？

私はあなたの例を見ることができないので、イメージ上にCSSの境界線があることを話していると仮定していますか？したがって

<span><img src="http://img_url" style="border: 4px solid black" /></span> 
<span>text</span> 

しかし、テキストは境界線付きの画像の下部に配置されます。これがあなたが求めているものでない場合は、より具体的な例を挙げることができますか？