要素を水平方向または垂直方向に中央揃えする方法：Twitter Bootstrap 編
2024-05-09
Twitter Bootstrap を使って要素を水平方向または垂直方向に中央揃えする方法
Twitter Bootstrap は、Web サイトやアプリケーションの開発を容易にする人気の CSS フレームワークです。 Bootstrap には、グリッドシステム、ボタン、フォーム、ナビゲーションバーなど、さまざまなコンポーネントが含まれています。
このチュートリアルでは、Bootstrap を使用して要素を水平方向または垂直方向に中央揃えする方法を説明します。
水平方向に中央揃え
要素を水平方向に中央揃えするには、以下の CSS プロパティを使用できます。
.center-horizontal {
text-align: center;
}
この CSS を要素に適用すると、その要素は水平方向に中央揃えされます。
例
<div class="center-horizontal">
<h1>要素を水平方向に中央揃え</h1>
</div>
.center-vertical {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
<div class="center-vertical">
<h1>要素を垂直方向に中央揃え</h1>
</div>
Bootstrap グリッドシステムを使用して、要素を水平方向および垂直方向に中央揃えすることもできます。
.col-md-offset-6 col-md-6
この CSS クラスを要素に適用すると、その要素はグリッドの 6 つの列のうち、中央の 6 つの列に配置されます。
<div class="row">
<div class="col-md-offset-6 col-md-6">
<h1>要素を水平方向に中央揃え</h1>
</div>
</div>
.text-center
<div class="row">
<div class="col-md-12 text-center">
<h1>要素を垂直方向に中央揃え</h1>
</div>
</div>
Twitter Bootstrap を使用して要素を水平方向または垂直方向に中央揃えするには、さまざまな方法があります。 上記の例を参考に、ニーズに合った方法を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水平方向に中央揃え</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHTTwrAZ3uK9PEhGOjF7yx2tl9BcQAQzYQuQ1AapTz7kQ+Givzqc2yY9Q9a/9" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="center-horizontal">
<h1>要素を水平方向に中央揃え</h1>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ggQ7j7k79JS0gG1qyj2kCTQk6gHq8B/jJ74wDsjlr/z8sSdJs1yO1xJ9VAvZ9j" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直方向に中央揃え</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHTTwrAZ3uK9PEhGOjF7yx2tl9BcQAQzYQuQ1AapTz7kQ+Givzqc2yY9Q9a/9" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="center-vertical">
<h1>要素を垂直方向に中央揃え</h1>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ggQ7j7k79JS0gG1qyj2kCTQk6gHq8B/jJ74wDsjlr/z8sSdJs1yO1xJ9VAvZ9j" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap グリッドシステム
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap グリッドシステム</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHTTwrAZ3uK9PEhGOjF7yx2tl9BcQAQzYQuQ1AapTz7kQ+Givzqc2yY9Q9a/9" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-6 col-md-6">
<h1>要素を水平方向に中央揃え</h1>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ggQ7j7k79JS0gG1qyj2kCTQk6gHq8B/jJ74wDsjlr/z8sSdJs1yO1xJ9
Twitter Bootstrap で要素を中央揃えするその他の方法
以下の方法は、Twitter Bootstrap で要素を水平方向または垂直方向に中央揃えする際に役立ちます。
flexbox は、Web ページ上の要素を柔軟にレイアウトするための CSS レイアウトモードです。 flexbox を使用して要素を中央揃えするには、以下の CSS プロパティを使用できます。
.center {
display: flex;
align-items: center;
justify-content: center;
}
<div class="center">
<h1>要素を flexbox で中央揃え</h1>
</div>
position: absolute を使用して、要素を相対的な位置に配置することもできます。
.center-horizontal {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.center-vertical {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<div class="container">
<div class="center-horizontal center-vertical">
<h1>要素を position: absolute で中央揃え</h1>
</div>
</div>
margin: auto を使用して、ブロック要素を水平方向に中央揃えすることもできます。
<div class="center-horizontal">
<h1>要素を margin: auto で中央揃え</h1>
</div>
<table>
<tr>
<td class="center">
<h1>要素を table で中央揃え</h1>
</td>
</tr>
</table>
css twitter-bootstrap
