CSSで枠内の文字をセンタリングさせる方法

このQ&Aのポイント
  • CSSを使用して枠内の特定の文字をセンタリングさせる方法について解説します。
  • 問題のある部分のみをセンタリングするために、text-align: center;を使うと「家」の部分も含まれてしまいます。そのため、特定の範囲のみをセンタリングする方法を紹介します。
  • 枠内の特定の文字をセンタリングさせるためには、div要素にposition: absolute;を指定し、特定の範囲に相対的な位置を設定します。また、text-align: right;を使用することで、左から特定の範囲までの幅を指定します。
回答を見る
  • ベストアンサー

cssで枠内の文字をセンタリングさせたい

cssで枠内の文字をセンタリングさせたい | ̄ ̄ ̄ ̄ ̄ ̄ ̄| |      〇〇家|   ̄ ̄ ̄ ̄ ̄ ̄ ̄ <body> ${afBlock('_emailer')}$ <!--block "_list.header" --> <!--block "_list.main.pageHeader" --> <div class="frame"> <div class="host cell">${host}$<span class="host_suffix">家</span></div> でセンタリングさせたいのは${host}$の部分にでる文字だけ(図でいう〇〇)です (単に text-align: center;を使用すると「家」の部分も含まれてセンタリングされてしまうので・・・ ちなみにセンタリングの幅は左枠線~「家」の前です(用は|←この範囲→家|) Cssはこうなってます div.frame div { position: absolute; } div.cell { border: 1px solid black; } div.host { left:0; top:5mm; width: 36mm; height: 9mm; text-align: right; vertical-align: bottom; padding-top:11mm; font-size:7mm; } span.host_suffix { font-size:5mm; }

  • CSS
  • 回答数2
  • ありがとう数22

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

${host}$ と 家 が1つの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>

cride0214
質問者

お礼

ありがとうございました 無事に上記の方法で無事に配置ができました

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

><div class="host cell">${host}$<span class="host_suffix">家</span></div> class が二つ指定してあるということはいずれかはそのページの他の場所でも登場するのですか? その内部のclassにhost_suffixが設定してあるのは、それがないspanも存在するのですか?  基本的にはマージンを取ってtext-align:centerでよいはずですが??

関連するQ&A

  • スタイルシートでのセンタリングについて。

    スタイルシートでセンタリングをしたいのですが、できなくて困っています。 以下のような場合に、センタリングをしようと思い「text-align:center;」を追加しましたがセンタリングされません。 どうしたらセンタリングできるでしょうか? ソース ------------------------------------ <html> <head> <title></title> <style type="text/css"> <!-- .test{ font-size: 10pt; font-family: MS 明朝; margin: 1px; padding: 1% 10%; border: outset 1px #EEDDFF; } --> </style> </head> <body> <span class=test>○○○○○</span> </body> </html>

    • ベストアンサー
    • HTML
  • CSS/float内のセンタリング

    下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか? <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>

    • ベストアンサー
    • HTML
  • CSSでセンタリングしたい

    こんにちは 現在デザインをCSSでWebサイトを構築していますが、どうしても分からないことがあります。 今まで、センタリングはcenter要素で行っていましたが、CSSではどのようにして行うのでしょうか。 ソニー : http://www.sony.co.jp/ のようにbody要素全体をセンタリングしたいです。 text-align :center はインライン要素専用ですので、ブロック要素ができるCSSはあるのでしょうか?Webブラウザに依存するJavaScriptなどのスクリプトは使用できません。

    • ベストアンサー
    • CSS
  • cssでメインコンテンツをセンタリングする方法

    cssでメインコンテンツをセンタリングする方法に関する質問をお願いいたします。 下記のサイトなどをみると、 http://www.css-lecture.com/log/css-beginner/026.html *xhtml <body> <div id="wrapper"> <h1>サイト全体を中央に配置にする</h1> <p>サイト全体を中央に配置にする為のテキスト</p> <!--/ #wrapper--></div> </body> *css body { text-align: center; } div#wrapper { width: 800px; margin: 0 auto; text-align: left; border: 1px solid #FF0000; } (1)「body」においてもセンタリングを行っているいるのですが、 それはどうしてでしょうか。 「div#wrapper」だけのセンタリングでは不十分なのでしょうか? > body { text-align: center; } > (2)また、「p」などのインライン要素は { text-align: center; } を使い、 「id」などのブロック要素は { margin: 0 auto; text-align: left; } を使いますすが、 body要素に対しても、 { text-align: center; } とすることが出来るのでしょうか? (3)あと、「div#wrappe」で囲ったブロックの中の 「p」や「id」で囲ったコンテンツの中身のテキストは 「div#wrapper」の「 text-align: left; 」で 全て左寄せになりますか? 参考書などを見ても解りづらかったので 教えていただきたくお願い致します。m(_ _)m その他参考URL: http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1010809440

    • ベストアンサー
    • CSS
  • FireFox2.0でCSSを使ってテーブルそのものをセンタリングしたい

    IE6だと #wrapper { text-align: center; } <div id="wrapper"> <TABLE border="1"> <tr><td>テキスト</td></tr> </table> </div> とやればテーブルそのものがセンタリングされるのですが、 FireFox2.0だと左に寄ったままです。 CSSを使わずに<center>で囲めばセンタリングされますが、 そうではなくてCSSを使ってやるやり方はないでしょうか?

    • ベストアンサー
    • HTML
  • CSSの使い方の流儀?

    先日業者にホームページの作成を依頼したところ、 子孫セレクタを駆使したCSSを使ったページが できあがってきたのですが・・・ たとえばこんな感じ <div id="header">   <div class="block1">     <span>・・・・・・</span>     ・・・・・・・   </div>   <span>・・・・・・</span>   ・・・・・・・ </div> <div id="contents">   <div class="block2">     <span>・・・・・・</span>     ・・・・・・・   </div>   <span>・・・・・・</span>   ・・・・・・・ </div> これに対して CSSでこんなスタイルが設定されています(セレクタ部のみ抜粋) #header .block1 #header .block1 span #header span #contents .block2 #contents .block2 span #contents span 私だったらわざわざ複雑な子孫セレクタを使わずに、 個々にクラスかIDを設定すると思うのですが・・・ また、ただ画像が貼ってあるだけと思ったら、 CSSでspanの背景画像として貼ってあったり、 ただの仕切り線と思ったら、 やはりdivのボーダーラインを使っていたり・・・ こういう作りって一般的なのでしょうか? あるいは、何か利点があるのでしょうか? ブログのカスタマイズなどだと、元のHTMLを自分で直せない場合が多いので、 こういうコトをすることが良くある、というのはわかるのですが・・・ あまりにHTMLのタグの構造とCSSが密接に絡んでいて、 ほんの一文追加しようとしただけで苦労していまして・・・ なんでこういう書き方なのかな・・・と、 不思議に思っています。。

  • cssについて質問です。

    cssについて質問です。 IE8で思ったように表示されるものが、Firefoxだとレイアウトが崩れてしまいます。 imgの高さや横幅がFirefoxで反映されず文字が上部に表示されるのですがいろいろやっても改善出来ずに途方に暮れています。 ヘッダーやフッターなどもありますが、関係のありそうな部分を抜き出してみました。 添付画像のように画像を3つならべて表示したいのですが、 一番無駄無くdivで組む方法もありましたらご教授下さい。 よろしくお願いします。 ■HTML■ <div class="subcontentsbox"> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> <div class="imgbox"> <a href="#"> <span><img src="#" /></span> <p class="code">12345</p> <p class="name">12345</p> <p class="price">12345</p> </a> </div> </div> ■css■ .subcontentsbox { font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Osaka,"MS Pゴシック",sans-serif; font-size: 100%; width: 100%; margin: 20px 0px; padding: 0; text-align: justify; -ms-text-justify: inter-ideograph; overflow: hidden; display: block; } .imgbox { background-color: #987654; height: 250px; width: 33.33333%; text-align: center; float: left; } .imgbox a{ text-decoration: none; border: 0; height: 180px; width: 180px; } .imgbox img{ border: 0; height: 180px; width: 180px; }

    • ベストアンサー
    • HTML
  • CSSのセンタリングが、「div」で何故か出来ない

    下記のアドレスのホームページについてです。 http://sky.geocities.jp/thanksv0358/index.html# HTMLで、 <body> <div id="main"> ~ </div> </body> とし、CSSで #main{ text-align:center; margin-left:auto; margin-right:auto; text-align:left; } としたにもかかわらず、何故かセンタリングができません。 今回、最初の<!DOCTYPE~の部分から全部、自分で書いてみました。 詳しい方がいましたら、よろしくお願いします。

  • IEでCSSを用いてテーブルをセンタリングしたい。

    という質問内容なのですが・・・ 条件は、  Windows 3.1/NT3.51 IE4~IE5 Win32 IE4~IE5.0x でCSSだけを用いてセンタリングしたいのですが どうしてもうまくいかないのです・・・ IE用では <DIV style="text-align: center"> CSS準拠では <TABLE style="margin-left: auto; margin-left: right"> があります・・・ 上記は、IE5.5、IE6、ネスケ6、7、もじら、Opera6,7で 確認してます。 CSSのみの利用なので、<CENTER>、<DIV align="center">は使わない方法で 知ってる方はいらっしゃいませんか?

  • CSS:文字の上下の中央揃え

    h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか? 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "MS ゴシック"; background-color: #88ceff;}

    • ベストアンサー
    • HTML