- ベストアンサー
Centerタグを使わないで中央よせ
- 画像を中央に配置し、幅100pxの中で左寄せされた文章のレイアウトを実現する方法について教えてください。
- Centerタグを使用せずに、画像は中央に配置し、文章は幅100pxの中で左寄せする方法をお教えください。
- Centerタグを使わずに、画像を中央に配置し、幅100pxの中で左寄せされた文章を実現する方法について教えてください。
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
＞ しかしWin７ IE8では文字が左によってしまいました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> か <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> を付けたらどうでしょうか。
その他の回答 (4)
- t_ohta
- ベストアンサー率38% (5246/13723)
これならどうですか？ 古いIEは手元に無いので試せませんがFirefox, IE10, Chromeでは希望の表示になってます。 ==================== <html> <head> <meta http-equiv='Content-Style-Type' content='text/css'> <style> .text100 { width: 100px; text-align: left; margin-left:auto; margin-right:auto; } .hoge { text-align:center; } </style> </head> <body> <div class='hoge'> <img src='./picture.jpg'> </div> <p class='text100'> aaa bbb ccc eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz </p> </body> <html>
補足
t_ohtaさん、ご回答ありがとうございます。 OSX safari, OSX chrome Win7 IE 11で確認したところ期待通りの結果をえました。 しかしWin７ IE8では文字が左によってしまいました。たぶん古いIEは margin-left:auto; margin-right:auto; が使えないのでしょう。
- Nas_life_is_gd
- ベストアンサー率13% (18/133)
こちらでいかがでしょうか。 ------------------------------------------------------------------------- <html> <head> <meta http-equiv='Content-Style-Type' content='text/css'> <style> .center { text-align: center; } .center img { display: block; } .text100 { width: 100px; text-align: left; display: inline-block; } </style> </head> <body> <div class="center"> <img src='./picture.jpg'> <p class='text100'> aaa bbb ccc eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz </p> </div> </body> <html>
補足
Nas_life_is_gdさん、ご回答ありがとうございます。 IE6でみると期待したものが得られます。しかしOSXのsafari及びchromeでみると、絵が左によってました。
- megurizumu
- ベストアンサー率37% (18/48)
下記のような感じでしょうか？ divタグを利用して、そろえるイメージですね。 widthの値は適宜変える必要があるとおもいます。 ========== <html> <head> <meta http-equiv='Content-Style-Type' content='text/css'> <style> .text100 { width: 100; text-align: left; } .center { margin: 0 auto; width: 100; text-align: center; } </style> </head> <body> <div class="center"> <img src='./picture.jpg'> <p class='text100'> aaa bbb ccc eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz</p> </div> </body> <html>
補足
megurizumuさん、ご回答ありがとうございます。 OSX chromeでみると、質問に添えた画像とは違うかんじでした。 IE6でみると、全部左によってました。
- t_ohta
- ベストアンサー率38% (5246/13723)
center タグを消す。 style の .text100 に margin-left:auto; と margin-right:auto; を足す。 img タグに style="margin-left:auto; margin-right:auto;"を足すか、適当なクラスを作って、そこで同様の設定を施す。
補足
t_ohata様、ご回答ありがとうございます。 <html> <head> <meta http-equiv='Content-Style-Type' content='text/css'> <style> .text100 { width: 100; text-align: left; margin-left:auto; margin-right:auto; } .hoge { margin-left:auto; margin-right:auto; } </style> </head> <body> <img class='hoge' src='./picture.jpg'> <p class='text100'> aaa bbb ccc eee fff ggg hhh iii jjj kkk lll mmm nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz </p> </body> <html> この様にしましたが、期待した位置に絵がきません。 また古いIEでみると全部左によってました。
お礼
t_ohtaさん、ご回答ありがとうございました。 ご指摘の通り、どちらのDOCTYPEでも期待したレイアウトをIE8でも得ました。