質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3066閲覧

cssでdiv内の高さを揃えたい

Naggy

総合スコア32

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/18 03:56

今の状態
現状
実現したいこと
希望
###実現したいこと
上記のように2つの図があります。
下のような形:containerの中心線に、container内部の各要素の高さの中心がくるように配置したいと考えています。

###試したこと

.container{ height:auto; display:table; } .left { float:left; display:table-cell; vertical-align:middle; } .right{ display:table-cell; vertical-align:middle; }
<div class="container"> <div class="left"> <img hspace="5" border="0" src="hoge.png"><br /> </div> <div class="right">comment</div> </div> <div style="clear:both;">

最初はleftやrightに対してposition:relative; top:50%;を指定したのですが、まったくうまくいかず、
次にvertical-align:middleを使えば実現できるかと思ったのですが、img要素が思うような位置に来てくれません。
何らかの対処法、もしくは、top:50%でうまくいかない理由などを教えていただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

参考としてFlexboxを使用した例
参考

投稿2017/02/18 04:24

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Naggy

2017/02/18 13:09

ご回答ありがとうございます! しかしながら、flexboxは古いiphoneから見ると崩れてしまうようです。 それと、containerのheightを指定せず、動的に可変なコンテナとして扱いたいのですが、その場合の対処があれば教えていただきたいです。
guest

0

ベストアンサー

containerに直だと、カスタマイズが大変だと思うので、勝手に付け足しちゃっています。

HTML

1<div id="box"> 2 <dl> 3 <dt><img src="hoge.png"></dt> 4 <dd> 5 <h3>hogehoge</h3> 6 <p>hogehoge</p> 7 </dd> 8 </dl> 9</div>

CSS

1#box dl { 2 display:table; 3 background-color:#ccc; 4 padding:3% 0; 5 width:100%; 6} 7#box dl dt,#box dl dd { 8 display:table-cell; 9 vertical-align:middle; 10} 11#box dl dt { 12 background-color:#fcf; 13 width:210px; 14 text-align:center; 15} 16#box dl dt img { 17 width:200px; 18 height:200px; 19} 20#box dl dd { 21 background-color:#cff; 22}

まず、#boxは、このままだと、左右は端まで表示されてしまうので、マージンを設けたい場合、
margin:0 30px;なり、margin:0 auto;width:90%;などを併せて利用すれば良いと思います。
dlですが、画像を見るに、上下にマージンが要るのかな?と思ったので、padding:3% 0;
上下に3%ずつ入れてあります。必要なければ削除で。
dt/ddには、floatは必要無いので、共通の値が入ります。もちろんclearfixも必要ありません。
で、普通のテーブルでも右側のテキスト量に合わせて左側の幅も変わってしまうので、
ここでは、画像が幅200pxと想定して、hspace="5"の分を足した210pxにしてあります。
hspaceは非推奨なので、使用しない方向で…
ddの中に入っているh3/pは仮のものなので、適切なタグと、CSSを追記してください。

imgの位置が…とありますが、もしかして、<br />が入っているからとかいうオチは無いですよね?

top:50%;の件ですが、上から50%のところから「開始」なので、さらに
transform:translateY(-50%);とかで半分持ち上げないといけませんし、
大元の高さが確定していないと、意味がありません。

投稿2017/02/18 14:28

LibertyBell3

総合スコア1084

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Naggy

2017/02/18 16:29

とっても丁寧にありがとうございました! dlとdisplay:tableでうまくいきました! また、top:50%やhspaceなどのご説明もありがとうございます。 cssは初心者丸出しで分からないことだらけなので、こういうきっかけをご提示いただけるとすごく助かります。 ありがとうございました!
guest

0

.leftのfloat:leftを外すといいですよ

投稿2017/02/18 04:05

oskbt

総合スコア1895

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Naggy

2017/02/18 14:53

すみません。それでもうまくいきませんでした汗
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問