「CSSで文字やテキストを上下中央の中心揃えにする方法」の編集履歴（バックアップ）一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
CSSで文字やテキストを上下中央の中心揃えにする方法について書いていきます。6月20日記事
イメージ
~
インライン要素を中央に
~
ブロック要素を中央に
~
~
目次
#contents
~
~
----
~
*
CSSで文字やテキストを上下中央の中心揃えにする方法について書いていきます。6月20日記事
イメージ
~
インライン要素を中央に
~
ブロック要素を中央に
~
~
目次
#contents
~
~
----
~
*このサンプルコードをいじってみます。
HTML部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>上下中央揃え</title>
</head>
<body>
<div id="wrapper">
<div id="box">
<p>文字が入っています。これを中央にするためには<br>
どのようにすればよいのでしょうか？<br>
考えていきます。</p>
</div>
</div>
</body>
</html>
CSS部
@charset "utf-8";
/* CSS Document */
#wrapper{
margin: 10px auto;
padding:20px;
width: 800px;
height:400px;
border: 1px solid #000;
}
#box{
margin: 30px auto;
width: 600px;
height:300px;
border:1px solid #000;
}
p{
}
すると次のような表示になります。
paddingを設定しているため、#boxのmarginが効いています。
※[[]]を参照
~
~
*ここから中央揃えしてみる。
