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

質問

• CSSを勉強中の方がdivとCSSを使用してテキストと画像を配置する際に問題が発生しています。
• 指定の方法を追加するためには、以下の2つの方法があります。
• まず、main-menu内の「二行目テキスト」を右寄せにする際には、テキストをspanタグで囲んでfloat: right;を指定します。次に、main-content内の画像を縦位置の中央に表示する際には、div.main-contentをrelative positionsで囲み、imgタグにtop: 50%; transform: translate(-50%, -50%);を指定します。これによって、テキストと画像の配置が正しくなります。

回答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に選ばせて頂きたいと思います。
本当にありがとうございました。