画像を横並びにしてボーダーで囲いたい

Webページ上で高さの違う画像を横並びに2枚並べて
ボーダーで囲いたいと思っています。

とりあえず以下のコードで希望通り表示出来ています。

CSS
1<div style="border: solid 2px; display: inline; padding: 180px 10px;" >
2	<img src="F16.jpg" height="346px" style="vertical-align: middle;">
3	<img src="F4.jpg" height="248px" style="vertical-align: middle;">
4</div>

これでも問題ないのですが、上記のコードでは
人間が画像の高さから計算して枠の寸法(パディングの大きさ)を決めています。

ですがdisplay属性のinline要素とblock要素の使い分けで　
毎回計算しなくても、パディングの余白部分のサイズだけを設定して
画像のように2枚の画像を横並びにして(縦方向に中央揃えに並べて)
表示できたような気がします。

画像のように枠で囲う表示にする場合に、
パディングの余白のサイズの値だけを入力すれば
2枚の画像を横並びにしてボーダーで囲えるような
コードがあれば教えて下さい。

追記
・出来なければ「そんなコードはありません」でもOKです。
・お勧めのコード、いつも使うコードがあれば教えて頂ければうれしいです。
↑　パディングの値の入力が条件通りでなくてもOKです。
↑　なぜお勧めなのか理由も教えて頂ければうれしいです。

※今回は貼りつけ用にCSSをインラインに書いています。
解答して頂く時は適当にidを付けて頂いてOKです。

よろしくお願いします。

「noka_blank」さんの回答のコードです。
※枠(ボーダー)は追加しております。

CSS
1.hoge {padding:10px; border: solid 2px;}
2
3.hoge img {display:inline-block;
4  vertical-align:middle;}

「yoshinavi」さんの回答のコードです
ありがとうございます。

yoshinavi

2019/03/25 12:13

現状のコードの不備として、上下のpaddingがなぜ、こんなに必要なのかを探っていくと、解決への方法が見えてくるかと思います。

ZZ-TOP

2019/03/25 12:34 編集

コメントありがとうございます。質問への追記・修正とのことですが、先の「noka_blank」さんへコメントの方に記載したとおり、「display:inline-block;」と「display:inline;」を勘違いしておりました。こちらに直接記載させて頂き、修正の代わりにとさせて頂きます。 ※先の方へのコメントも参考にして頂ければ幸いです。今回は質問に参加して頂きありがとうございます。

行動規範の内容に同意します

回答2件

img要素のstyleにdisplay:inline-blockを指定すれば、画像の高さに合わせて縦方向の中央に揃います。

html
1<div class="hoge">
2  <img src="https://placehold.jp/150x150.png">
3  <img src="https://placehold.jp/150x100.png">
4</div>

css
1.hoge {
2  padding:10px;
3}
4.hoge img {
5  display:inline-block;
6  vertical-align:middle;
7}

投稿2019/03/25 11:47

noka_blank

総合スコア252

ZZ-TOP

2019/03/25 11:55

回答して頂きありがとうございます。インライン要素が使えるはずだと思っていたのですが、「display:inline-block;」なのですね。「display:inline;」で動作しないので、不思議に感じていました。今回は回答して頂きありがとうございます。機会がありましたら、またお願いします。 ※質問はしばらく開けておきます。

ZZ-TOP

2019/03/25 13:11

先ほどは回答して頂きありがとうございます。 1つ忘れていたので追加でコメントさせて頂きます。質問の1行目にある通り「高さの違う画像を横並びに2枚並べてボーダーで囲いたいと思っています。」頂いたコードにはボーダーがなかったので、追加したところボーダーはページの幅に対して100％の幅になりました。こちらで作成したコードは自分で計算しなければならないのですが、ボーダーの幅は画像に対して適切なパディングを保てます。このことがあり、一応、再度、コメントさせて頂きました。 ※追加した画像を見て頂ければ、実現したいことをご理解して頂けると思います。こういうことが不可の場合はスルーでOKです。もし可能でしたら、教えて頂ければうれしいです。

行動規範の内容に同意します

ベストアンサー

インラインのflexではどうですか？

CSS
1div {
2  display: inline-flex;
3  align-items: center;
4  padding:10px;
5  border: solid 2px #000;
6}
7
8div img:first-child {
9  margin-right: 10px;
10}