- ベストアンサー
CSSで枠内の文字をセンタリングさせる方法
- CSSを使用して枠内の特定の文字をセンタリングさせる方法について解説します。
- 問題のある部分のみをセンタリングするために、text-align: center;を使うと「家」の部分も含まれてしまいます。そのため、特定の範囲のみをセンタリングする方法を紹介します。
- 枠内の特定の文字をセンタリングさせるためには、div要素にposition: absolute;を指定し、特定の範囲に相対的な位置を設定します。また、text-align: right;を使用することで、左から特定の範囲までの幅を指定します。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
${host}$ と 家 が１つのdivタグで囲まれていますので、このdivタグのhostというクラスに対してtext-align:center;をCSSで設定すると、中に入っている要素である${host}$と家という文字は、まとめて中央寄せになってしまいます。 手っ取り早く中央寄せにできるサンプルは下記の通りです。 下記の例では、${host}$ を更にdivタグで囲い、divタグにhost_boxというクラスを設定し、家は右端に残し、${host}$ だけ中央寄せになるようにしています(Internet Explorer8とFirefox3で表示確認)。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>サンプル</title> <style type="text/css"> <!-- div.frame div { position: absolute; } div.cell { border: 1px solid black; } div.host { left:0; top:5mm; width:101.865mm; height:9mm; text-align:right; vertical-align:bottom; padding-top:11mm; font-size:7mm; } span.host_suffix { font-size:5mm; background:#FF9; } .host_box{ width:365px; text-align:center; background:#0CF; } --> </style></head> <body> ${afBlock('_emailer')}$ <!--block "_list.header" --> <!--block "_list.main.pageHeader" --> <div class="frame"> <div class="host cell"><div class="host_box">${host}$</div><span class="host_suffix">家</span></div> </div> </body> </html>
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞<div class="host cell">${host}$<span class="host_suffix">家</span></div> class が二つ指定してあるということはいずれかはそのページの他の場所でも登場するのですか？ その内部のclassにhost_suffixが設定してあるのは、それがないspanも存在するのですか？ 基本的にはマージンを取ってtext-align:centerでよいはずですが？？
お礼
ありがとうございました 無事に上記の方法で無事に配置ができました