CSS 水平、垂直、中央揃え
CSS プロパティを使用して、左揃え、中央揃え、右揃え、垂直中央揃えなどのさまざまな配置を実現します。
方法 1: float 属性を使用して左揃えと右揃えを設定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
.divcss5-left{float:left;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-left">此DIV靠左对齐显示</div>
</body>
</html>方法 2: 使用 margin 属性を中央揃えにするには、中央揃えにするスタイルに margin:0 auto を追加するだけです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
.divcss5-cent{margin:0 auto;width:250px;height:50px;border:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-cent">此DIV居中对齐显示</div>
</body>
</html>方法 3: position 属性を使用して左右の配置を設定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
.divcss5-cent
{
position:absolute;
right:0px;
width:250px;
height:50px;
border:1px solid #F00
}
</style>
</head>
<body>
<div class="divcss5-cent">此DIV右对齐显示</div>
</body>
</html>複数の属性を使用して垂直方向の中央揃えを実現します:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
.wrp {
background-color: #b9b9b9;
width: 340px;
height: 260px;
}
.box {
color: white;
background-color: #3e8e41;
width: 200px;
height: 120px;
overflow: auto;
}
.wrp1 { position: relative; }
.box1 {
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
</style>
<body>
<div class="wrp wrp1">
<div class="box box1">
<h3>完全居中：</h3>
<h3>利用css定位规则，设置左右、上下方向定位为0，margin为auto</h3>
</div>
</div>
</body>
</html>
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
.wrp {
background-color: #b9b9b9;
width: 340px;
height: 260px;
}
.box {
color: white;
background-color: #3e8e41;
width: 200px;
height: 120px;
overflow: auto;
}
.wrp1 { position: relative; }
.box1 {
margin: auto;
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
}
</style>
<body>
<div class="wrp wrp1">
<div class="box box1">
<h3>完全居中：</h3>
<h3>利用css定位规则，设置左右、上下方向定位为0，margin为auto</h3>
</div>
</div>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
