CSSでインラインブロック要素を中央寄せにする方法を徹底解説！ずれる原因と対策も紹介
CSSでインラインブロック要素を中央揃えする方法
親要素に text-align: center; を設定する
これは最も簡単で一般的な方法です。親要素に text-align: center; を設定することで、その中に含まれるすべてのインラインブロック要素が中央揃えになります。
.parent {
text-align: center;
}
.inline-block {
display: inline-block;
}
この方法の利点は、コードが簡潔で分かりやすいことです。欠点は、親要素がインライン要素の場合は使用できないことです。
要素に margin: 0 auto; を設定する
この方法は、親要素がインライン要素でも使用できます。要素に margin: 0 auto; を設定することで、左右の余白が自動的に調整され、要素が中央揃えになります。
.inline-block {
display: inline-block;
margin: 0 auto;
}
この方法の利点は、親要素がインライン要素でも使用できることです。欠点は、コードが少し長くなることです。
上記以外にも、以下のような方法でインラインブロック要素を中央揃えすることができます。
display: table;とmargin: 0 auto;を組み合わせるposition: absolute;とleft: 50%;とtop: 50%;を組み合わせるflexboxを使用する
これらの方法は、より高度な技術が必要となりますが、より柔軟なレイアウトを作成することができます。
CSSでインラインブロック要素を中央揃えするには、主に以下の2つの方法があります。
状況に応じて適切な方法を選択してください。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
text-align: center;
}
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="inline-block">インラインブロック要素</div>
</div>
</body>
</html>
このコードを実行すると、以下のような表示になります。
<!DOCTYPE html>
<html>
<head>
<style>
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
background-color: #ccc;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="inline-block">インラインブロック要素</div>
</body>
</html>
このコードを実行すると、上記と同じように中央揃えされたインラインブロック要素が表示されます。
<!DOCTYPE html>
<html>
<head>
<style>
.inline-block {
display: table;
margin: 0 auto;
width: 200px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="inline-block">インラインブロック要素</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.inline-block {
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="inline-block">インラインブロック要素</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.inline-block {
width: 200px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="inline-block">インラインブロック要素</div>
</div>
</body>
</html>
CSSでインラインブロック要素を中央揃えするその他の方法
Flexboxは、Webページのレイアウトを柔軟に制御するためのレイアウトモジュールです。Flexboxを使用してインラインブロック要素を中央揃えするには、以下のコードを使用します。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
background-color: #ccc;
}
このコードは、親要素をフレックスコンテナにし、 justify-content: center; プロパティで水平方向の中央揃えを、 align-items: center; プロパティで垂直方向の中央揃えを設定します。
Grid を使用する
.parent {
display: grid;
place-items: center;
}
.inline-block {
display: inline-block;
width: 200px;
height: 100px;
background-color: #ccc;
}
このコードは、親要素をグリッドコンテナにし、 place-items: center; プロパティで要素を中央に配置します。
絶対配置を使用してインラインブロック要素を中央揃えするには、以下のコードを使用します。
.inline-block {
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #ccc;
}
このコードは、要素を絶対配置にし、 top: 50%; と left: 50%; プロパティで親要素の中央に配置します。その後、 transform: translate(-50%, -50%); プロパティを使用して、要素を自身の幅と高さの半分だけオフセットします。
.inline-block {
display: table;
margin: 0 auto;
width: 200px;
height: 100px;
background-color: #ccc;
}
このコードは、要素をテーブルセルに変換し、 margin: 0 auto; プロパティを使用して左右の余白を自動的に調整します。
注意点
上記の方法を使用する場合は、以下の点に注意する必要があります。
- 使用する方法は、状況に応じて選択する必要があります。
- すべての方法がすべてのブラウザでサポートされているわけではありません。
- コードは、要素の構造やデザインに合わせて調整する必要があります。
css
