- ベストアンサー
文字がテーブルの中央に表示されない
スタイルシートで th.test1 { text-align: center; width: 100px; } と宣言して、 <th class="test1">日付</th> とすれば、 中央に文字を表示しつつ、列の幅も指定通りになりますよね？ そのはずなのですが、 列の幅は指定できたのですが 文字が中央に表示されません。 なぜでしょうか？
- MZVROKSPDAFLY
- お礼率100% (56/56)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
なんらかの別のスタイルシートが邪魔しているのでは？ その設定だけ書いたhtmlではどうですか？ <html> <head> <style> th.test1 { text-align: center; width: 100px;border:1px solid #000000;} </style> </head> <body> <p> <table> <tr> <th class="test1">日付</th> </tr> </table> </p> </body> </html>
関連するQ&A
- ボックスの文字を中央に表示したいのですが
<style> .header1{width:760px; height:30px; background-color:#CCCCCC; text-align:center; vertical-align:middle } </style> ........................ <p class="header1" >あいうえおかきくけこさしすせ TEL : xxxx-xx-xxxx</p> 文字の表示はボックスの中央に来るのですが垂直方向が上方向にずれてしまいます。上下方向も中央に表示させるにはどういう指定をすれば良いのでしょうか?
- ベストアンサー
- HTML
- 文字のサイズを大きくしつつ、中央に表示させるには？
ファイアフォックスで、文字のサイズを大きくしつつ、中央に表示させるには？ <BODY> <div style="text-align:center;" style="font-size:300%;">test1</div> <div style="font-size:300%;">test2</div> </BODY> これをすると、test1は中央に表示されるけど文字は小さいままで test２は、文字は大きく表示されるけど中央には表示されません。 どちらも行うにはどうすればいいでしょうか？ IEでは<div style="text-align:center;" style="font-size:300%;">test1</div>で、 中央に表示されつつ、文字も大きくなります。
- ベストアンサー
- HTML
- htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜ 86行目 ｜ーーーーー｜ ーーーーー｜ 87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目 ｜ 92行目｜ 97行目 ーーーーー｜ 89行目 ｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜ 86行目｜87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目｜89行目 ｜ 92行目 ｜ 97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
- 「全体のレイアウト：中央揃えについて」補足
「全体のレイアウト：中央揃えについて」の質問で、IE7ではバグで「text-align: center;」にしなければ中央揃えができないということでしたが下記のように<div class="zen">に「text-align: center;」を指定しても中央揃えはできませんでした。 <?xml version="1.0" encoding="Shift-JIS" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <style type="text/css"> <!-- div.zen { width: 900px; margin: 0 auto; text-align: center; } div.k1 { width: 900px; height: 200px; background-color: black; } --> </style> <title></title> </head> <body> <div class="zen"> <div class="k1"></div> </div> </body> </html> ということは、 1.body { text-align: center; }（中央揃え確認済み） 2.文字コードをUTF-8にして、XML宣言を省略する（中央揃え未確認） の二つしかIE7で中央にそろえる方法はないということでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- TABLE内でのwidth指定
<table> <tr><th colspan="3">●</th></tr> <tr><td class="1">■</td> <td class="2">▲</td> <td class="3">★</td></tr> <tr><th colspan="3">○</th></tr> <tr><td class="1">□</td> <td class="2">△</td> <td class="3">☆</td></tr> </table> このサンプルについて考えています。 ●○が、割と長い文字列になります。 この時、例えば2段目の左の列が、■,□のうち長い方の文字列に合わせて「width」が表示されるためには、スタイル「class="1"」の内容をどう記述すれば良いのでしょうか。 デフォルトの「width:auto」では、●○の長さに引っ張られてしまい、余分なスペースが出来てしまいます。 2段目の中の列（▲△部分）が短文を記述するセルなので、●○に合わせる必要のあるスペースは、全てここで吸収してしまいたいのです。 同じ仕組みで幾つかテーブルを組みますので、【class="1"】のwidthにpx,%等といった値自体を指定するのは向いていません。 ご指導おねがいします。
- ベストアンサー
- HTML
- 文字を中央に寄せる
<HTML> <HEAD> <TITLE>メンバー表</TITLE> <STYLE TYPE="text/css"> <!-- TR｛text-align:center;｝ TH｛text-align:center;｝ TD｛text-align:center;｝ --> </STYLE> </HEAD> <BODY> <TABLE BORDER=1 ALIGN=CENTER> <TR><TH ROWSPAN=3>ここには画像</TH><TH>名前</TH><TH>称号</TH><TH>レベル</TH><TH>タイプ</TH><TH>AC</TH></TR> <TR><TD>竜千士 翔</TD><TD>見習い魔導士</TD><TD>45</TD><TD>con18,wis18</TD><TD>43</TD></TR> <TR><TD>コメント</TD><TD COLSPAN=4>v(￣Д￣)v イエーイ </TD></TR> </TABLE> </BODY> 上記のようにスタイルシートで文字を中央に寄せようとしたのですがどうしてもできません。 htmlタグでやるとできたのですが・・・ どこが間違っているのかどうかご教授お願いいたいします。 ちなみに使っているブラウザはIEでバージョンは６ です
- ベストアンサー
- HTML
- IEで中央寄せにしたい
<html> <head> <title>test</title> <style type="text/css"> <!-- body {margin-right : auto; margin-left : auto; width : 50%} div#center { text-align: center; } --> </style> </head> <body> <DIV style=background:red;> test</DIV> </body> </html> これでスレイプニルだとちゃんと中央寄せになるのですが ＩＥ９だと横画面いっぱいに広がってしまいます。 ＩＥでも指定した幅で表示させる方法はありますか？
- ベストアンサー
- HTML
- コンテナ内で文字を中央に表示したい
<div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。
- ベストアンサー
- HTML
- cssで、全体を中央寄せ、文字は左寄せにする方法
CSSで、全体を中央寄せにしつつ、全ての文字を左寄せにする方法を教えてください。 bodyにtext-align: centerを設定し、 #outline{ width:1200px; margin-right:auto; margin-left:auto; text-align:left; } .content{ float:left; width: 1200px; } と書き、<div id="outline"><div class="content">で全体を囲みました。 すると、大方できたのですが、h要素のみずれてしまいます。 （h1は全体に対する左寄せ、h2は全体に対する中央寄せとなってしまいました・・・） h要素は色とフォントサイズを指定したのみです。 CSSについて自体あまり詳しくないので、なぜこうなってしまっているのかわかりません。 どのようにすれば、他と同じく中央左寄せにすることができるでしょうか？ よろしくお願いいたします。
- ベストアンサー
- CSS
- tableの内側の線を表示したい
タイトルどおり、テーブルの内側の線を書きたいのですが、CSSなどが影響しているようで縦の線が表示されません。 私個人のサイトではないので、他のページのテーブルは変更できないので、私が書いている文章の途中にだけ出てくるテーブルのみに、縦線を表示させたいです。 今後は使うことはないと思うので、できれば、CSSのファイルをいじることなくやりたいのですが、方法がわかりません。アイデアを貸してください。 <table style="height: 614px;" width="496" > <tbody> <tr> <td><img class="size-medium wp-image-1624 aligncenter" src="" alt="12" width="225" height="300" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1626 aligncenter" src="" alt="11" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1584 aligncenter" src="" alt="1022" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1585 aligncenter" src="" alt="1082" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1586 aligncenter" src="" alt="1092" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1627 aligncenter" src="" alt="13" width="254" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1583 aligncenter" src="" alt="P1000231" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1625 aligncenter" src="" alt="15" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> </tbody> </table>
- 締切済み
- CSS
お礼
ありがとうございました。