こんにちは 馬場です。 「テキストの横に並ぶ画像の位置合わせ」 について、2回に分けてお話します。 今回は、vertical-alignを使った方法を ご紹介します。 「テキストの横に並ぶ画像の位置合わせ」と 言葉で表現してもピンと来ませんが、 サイトで更新があった項目などに 「New」などのアイコンが 表示されているのを ご覧になったことがありますよね? あの「New」アイコンの 縦方向の位置調整というイメージです。 ・指定なしの場合 ・vertical-align:middleを設定 ・vertical-alignに数値を設定 ▼ 指定なしの場合 何も意識せず、 テキストと画像を 横に並べてみました。 なんだか高さが合ってくれません。 (htmlコーディング) <p>新しい<img src="icon_new_01.gif" /> 新しい</p> ▼ vertical-align:mi