中央寄せの方法

html中に<center>~</center>を使ってましたが・・・それは廃止ということですけれど中央に持ってきたいですよね。そこでテーブルタグを中央に置いてみました。

■もどる

背景をつけて文字は左上 背景をつけて文字はセンターに
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=UTF-8">
<meta name="KEYWORDS" content="HTML5">
<title></title>
<link rel="stylesheet" href="chuuou.css">
</head>
 
<body>
<div id="mcenter">
 
<table border="3">
<tr bgcolor="FFFFFF">
<td id="mbox1">背景をつけて文字は<strong>左上</strong>に</td>
 
<td id="mbox2">背景をつけて文字は<strong>センターに</strong></td></tr>
</table>
 
</div>
</body>
</html>
 

スタイルシートchuuou.cssの内容
@charset "UTF-8"
/* 背景の指定 */
body{
text-align : center; /* IE対策のおまじないらしい・・・*/
}
 
table {
border-color: #00C000;/* テーブルのラインの色を指定 */
}
div {
font-size: 20px; /*DIVの中の文字の大きさ */
}
/* ここから中央寄せ */
#mcenter {
  width: 600px; /* 横幅を600ピクセルに */
  margin: 0 auto; /* ここが中央寄せのポイント */
}
 
td {
width: 300px;height: 150px; /*幅300ピクセル高さ150ピクセルのセル */
}
 
#mbox1 {
text-align: left; /*文字は左寄せ */
vertical-align: top; /* で、一番上から */
background-image: url(hana.gif); /*背景画像 */
}
 
#mbox2 {
text-align: center; /* 文字は中央寄せ */
vertical-align: text-bottom; /*文字は下に */
background-color: #E0FFE0; /* 背景色の指定 */
}
inserted by FC2 system