ＨＴＭＬ５レイアウト

質問お願いします。

レスポンシブレイアウトなのですが
横幅を%で指定し高さが可変,していせずに高さはIMGによって可変します。
IMGの右にDIVで囲ったテキストを垂直中央寄せにしたいのですが..
tablecellやpostionなどを試していますがどれもうまくいきません。
どういった方法で実現できるか何方か教えていただけないでしょうか？
よろしくお願いします。

<div class="clearfix" style="width:100%;">
    <div style="float:left;width:30%;">
        <img src="images/baner1.png" width="100%" alt=""/>
    </div>
    
    <div style="float:right;width:70%;">
        <div>//この要素を中央に
        <h3>製品･サービス</h3>
        <p>TEXTTEXTTEXT</p>
        </div>
    </div>
</div>

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

回答2件

table-cellでのやり方は既にhiimさんが回答されてますのでpositionでのやり方を。

HTML
1<div class="clearfix" style="width:100%;">
2    <div style="float:left;width:30%;">
3        <img src="images/baner1.png" width="100%" alt=""/>
4    </div>
5
6    <div style="float:right;width:70%;position:relative;">
7        <div style="position:absolute;left:50%;top:50%;tranform:translate(-50%,-50%);">//この要素を中央に
8        <h3>製品･サービス</h3>
9        <p>TEXTTEXTTEXT</p>
10        </div>
11    </div>
12</div>

ちなみになんで全部インラインCSSなんですか？
HTMLメールでも作っているのでしょうか。
通常のWebサイトを制作しているのであれば原則CSSは外部ファイルにまとめることを強く推奨いたします。

投稿2016/11/06 14:45

aKusano

総合スコア3763

aKusano

2016/11/06 14:53

あ、これだとimgの入ってるdivと隣の右寄せになってるdivの高さ揃わないからダメだわ…:(；ﾞﾟ'ωﾟ'): もしこれでやるならfloat:left;してるdivとfloat:right;してるdivの高さをJavaScriptで強制的に揃えないとダメですね・・・失礼しましたm(_ _)m

aKusano

2016/11/06 14:59

というわけでサポート環境は限られますがdisplay:flexのやり方を・・・ <div style="width:100%; display:flex;align-items:center;"> <div style="width:30%;"> <img src="images/baner1.png" width="100%" alt=""/> </div> <div style="width:70%;"> <div>//この要素を中央に <h3>製品･サービス</h3> <p>TEXTTEXTTEXT</p> </div> </div> </div>

kei344

2016/11/06 15:07

To: aKusanoさん 1点指摘です。「tranform」⇒「transform」あと、下記のような感じでいけるような。「clearfix」が効いているのであれば、overflow: hidden;は不要ですが。 <div class="clearfix" style="width: 100%; position: relative; overflow: hidden;"> <div style="float:left;width:30%;"> <img src="https://placehold.jp/24/cc9999/993333/350x550.png" width="100%" alt=""/> </div> <div style="position: absolute; top: 50%; transform: translate(0px, -50%); right: 0px;">//この要素を中央に <h3>製品･サービス</h3> <p>TEXTTEXTTEXT</p> </div> </div> https://jsfiddle.net/dhtvb9ro/

aKusano

2016/11/06 15:44

To: kei344さん >1点指摘です。「tranform」⇒「transform」おっと、失礼しました。誤植誤植… あと左側が画像だからposition:relative;を親につけるならできますね。確かに。

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

やりかた色々あると思いますが、記載のソースではfloat:rightのdivとimgが入っているdivの高さが等しくないので垂直中央によらない（厳密には違うけど）という事になりますので、解決方法は左右のdivの高さを揃える事です。

例えば

html
1<div style="width:100%;display:table;">
2	<div style="width:30%;display:table-cell;">
3        <img src="images/baner1.png" width="100%" alt=""/>
4    </div>
5
6    <div style="width:70%;display:table-cell;vertical-align:middle;">
7        <div>
8        //この要素を中央に
9        <h3>製品･サービス</h3>
10        <p>TEXTTEXTTEXT</p>
11        </div>
12    </div>
13</div>
14