質問: Webページ上で**高さの違う画像を横並びに2枚並べて** **ボーダーで囲いたいと思っています。** とりあえず以下のコードで希望通り表示出来ています。 ``` ``` ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/1d6cdfeb6eaf062560bfc0dd49be1599.jpeg) これでも問題ないのですが、上記のコードでは 人間が画像の高さから計算して枠の寸法(パディングの大きさ)を決めています。 ですがdisplay属性のinline要素とblock要素の使い分けで 毎回計算しなくても、**パディングの余白部分のサイズだけを設定して** 画像のように2枚の画像を横並びにして(縦方向に中央揃えに並べて) 表示できたような気がします。 画像のように枠で囲う表示にする場合に、 **パディングの余白のサイズの値だけを入力**すれば 2枚の画像を横並びにしてボーダーで囲えるような コードがあれば教えて下さい。 追記 ・出来なければ「そんなコードはありません」でもOKです。 ・お勧めのコード、いつも使うコードがあれば教えて頂ければうれしいです。 ↑ パディングの値の入力が条件通りでなくてもOKです。 ↑ なぜお勧めなのか理由も教えて頂ければうれしいです。 ※今回は貼りつけ用にCSSをインラインに書いています。 解答して頂く時は適当にidを付けて頂いてOKです。 よろしくお願いします。 --- 「noka_blank」さんの回答のコードです。 ※枠(ボーダー)は追加しております。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e2dc726c294a93bcd96f3fb97239e488.jpeg) ``` .hoge {padding:10px; border: solid 2px;} .hoge img {display:inline-block; vertical-align:middle;} ``` --- 「yoshinavi」さんの回答のコードです ありがとうございます。 ![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/e4541ade47d6c629bb7c8b767320e30e.jpeg)
回答: img要素のstyleにdisplay:inline-blockを指定すれば、画像の高さに合わせて縦方向の中央に揃います。 ``` ``` ``` .hoge { padding:10px; } .hoge img { display:inline-block; vertical-align:middle; } ```