div内のテキストと画像の配置について

質問

お世話になります。

現在CSSを勉強中なのですが、参考サイトを見てテーブルを使わずにdivとC
SSで同じようなレイアウトが可能と知り、試してみたのですが、div内に配
置したテキストや画像の表示が思い通りになりません。
ソースは以下のような形です。

【HTMLの内容】
<div class="main">
<div class="main-menu">一行目テキスト<br />二行目テキスト</div>
<div class="main-content"><img src="xxx.jpg"></div>
</div>

【CSSの内容】
div.main {
width: 500px;
}
div.main-menu {
float: left; width: 300px;
}
div.main-content {
float: left;
}

上記に、以下の指定を追加したいと考えています。

1)main-menu内の「二行目テキスト」だけを右寄せにする。

2)main-content内の画像が常に縦位置の中央に表示されるようにする。
（main-menu内のテキストが複数行になり、divの縦幅が大きくなった場合に
画像も縦幅に合わせ中央に表示したいです。）

この場合、どのような方法があるでしょうか？
勉強不足で大変恐縮ですが、よろしくお願いします。

回答No.3

神崎 渉瑠（@taloo） · ベストアンサー

すみません、No.2のスクリプトを訂正します。
たぶん、これでいいと思います。

<script>
onload=function(){
var div=document.getElementsByClassName('main-menu')[0];
var img=document.getElementsByClassName('main-content')[0].getElementsByTagName('img')[0];
img.style.position='relative';
img.style.top=((div.clientHeight-img.clientHeight)/2)+'px';
};
</script>

>No.1さん
ついでで申し訳ありませんが、お気を悪くされましたら済みません。
自分でHTMLを作って質問文とはまるきり別物にしてしまう（私はそう感じます）方もいらっしゃるので。
ともあれどこまで同じにすべきか、どこまで書き換えるべきか、というのも難しいと思いますけどね。
わたしは「一行目テキスト二行目テキスト」という言葉だけを見て、段落が１つか、２つにすべきかというのを判断できませんので、可能な限り質問文に従っています。

---------
段落１つでデザイン的に分離するのは、
2chなど（中国国内の商品パッケージ？）でよくみかけるこういうタイトルデザインみたいなのです。
日本語の文法として存在しなくても、HTMLの文法では存在し得ますから。
（画像添付できなかったので、URL添付で。
http://kohada.2ch.net/test/read.cgi/pcnews/1336993251/l50 ）

<hgroup>
<h1>iOS6に3DMap搭載か！動画あり</h1>
<h2><span>GoogleMap</span><span>さようなら</span></h2>
</hgroup>

<style>
hgroup { position: relative;width:100%;height:5em;}
h1{position:absolute;left:6em;top:0;}
h2 {position: absolute;top:0;}
h2 span{left:0;}
h2 span:before{content:"【";}
h2 span:after{content:"】";}
h2 span+span{position:relative;left:20em;}
</style>
なんかもうちょっとマシなスタイル考えないと、、、

お礼

ご返答ありがとうございます！
私が質問に書いている形で希望通りの配置をするにはスクリプトが必要になるのですね・・・
回答者様のおっしゃる通り、同じ見た目になれば他の方法でも良いのか、あくまで質問に書いた形でそうしたいのか、私の質問が要領を得ていなかったと思います。
可能な限り質問文に沿ってご回答頂いた回答者様をBAに選ばせて頂きたいと思います。
本当にありがとうございました。

回答No.2

神崎 渉瑠（@taloo）

>1)main-menu内の「二行目テキスト」だけを右寄せにする。
（兼to No.1さん）
デザインを目的としてHTMLを作るべきではありません。
別々の場所に表示したいからと行って、１つの段落を２つに分割しては行けません。

デザインの前にまず、
別々の場所に表示するその２つの文章は、「１つの段落にすべきか」「２つの段落にすべきか」を考えてみてください。

もし、「１つの段落に収まるが、別々の場所に表示したい」であれば、以下のようにしてみてください。

<div class="main-menu">
<p>
<span class="first-line">一行目テキスト</span><br />
<span class="second-line">二行目テキスト</span>
</p>
</div>

.main-menu {
overflow: auto;
}
.main-menu p {
margin: 0; padding: 0; /* 任意 */
}
.main-menu span {
display: block;
}
.main-menu span.first-line {
float: left;
}
.main-menu span.second-line {
float: right;
}
.main-menu br {
display: none;
}
.main-menu span br { /* span内に<br>が使われてなければ不要 */
display: inline;
}

※上記brに関して、
.main-menu br {
.main-menu span br {
この2つを消して、以下のようにしてもいいですが、古めのブラウザでは対応していないかもしれません。
.main-menu p>br{
display: none;
}

---------------
もし、「２つの段落にしなければならない、かつ、別々の場所に表示したい」であれば、以下のようにしてみてください。

<div class="main-menu">
<p class="first-line">一行目テキスト</p>
<p class="second-line">二行目テキスト</p>
</div>

.main-menu{
overflow: auto;
}
.main-menu p.first-line {
float: left;
}
.main-menu p.second-line {
float: right;
}

-----------
>2)main-content内の画像が常に縦位置の中央に表示されるようにする。

残念ながら私には、JavaScriptを使うか、背景画像にしてしまう（本来<img>として表示すべき画像をデザインのために削除し、styleで表示させる）方法しか持ち合わせていません。
display: table-cellを使えばvertical-align: middleが使えるようになりますが、HTML構造上、この方法が使えないこともあります。
（もしかすると何かの組み合わせで使えるようになるかもしれませんが、私はその方法を知りません。）

以下、JavaScriptによる方法です。ご参考まで。（古めのブラウザでは動かないかもしれません）

<script>
onload=function(){
var div=document.getElementsByClassName('main-content')[0];
var img=div.getElementsByTagName('img')[0];
img.style.position='relative';
img.style.top=(div.clientHeight/2)+'px';
};
</script>

<div class="main-menu">
<p>
<span class="first-line">一行目<br />テキスト</span><br />
<span class="second-line">二行目<br/>テキスト</span>
</p>
<div class="main-content"><img src="xxx.jpg" width="20" height="20"></div>
</div>

---------------------
もし、画像を文書から削除して良い、削除すべきであるなら、以下のようにしてみてください。

<div class="main">
<div class="main-menu">
<span class="fitst-line">一行目テキスト</span><br />
<span class="second-line">二行目テキスト</span>
</div>
</div>

.main-menu{
background-image: url(xxx.jpg);
background-position: 50% 50%;
background-repeat: no-repeat;
}

回答No.1

naokita

１）　＞　一行目テキスト<br />二行目テキスト
これは単なるテキストだから無理かな。三行目以降の対応にもよるけど・・・
だから、
<p>一行目テキスト</p><p>二行目テキスト</p>
などで二行目を右よせ

--------------------------------------

２）　他の方法もあるけど、
一番簡単なのは、table-cell　（旧ブラウザは非対応）

div.main {
width: 500px; display:table;
}
div.main div{ display:table-cell;}
div.main-menu { background:yellow;
width: 300px; vertical-align:top; /* 上 */
}
div.main-content { background:lime;
vertical-align:middle; /* 中 */
}

お礼

ご返答ありがとうございます！
勉強不足で恥ずかしいのですが、table-cellというものについてよく知らなかったので、調べて色々試してみます。