【CSS】floatでdiv要素を横に並べる方法

floatで並べる

divタグは基本的に縦に並んでいくので、横並びにするにはfloatを使います。floatは浮かせるというイメージで、div要素をいったん浮かせて、傾けてまとめる、そんなイメージです（よくわからん）。

<div class="box">
  <img class="image" src="https://manabu-biology.com/wp-content/uploads/2020/11/00164_01.png" alt="" />
</div>
<div class="box">
  <img class="image" src="https://manabu-biology.com/wp-content/uploads/2020/11/00164_01.png" alt="" />
</div>
<div class="box">
  <img class="image" src="https://manabu-biology.com/wp-content/uploads/2020/11/00164_01.png" alt="" />
</div>

このままでは次のように表示されます。

CSSでfloat:leftを指定し横並びにしましょう。

.box{
  float:left;
  width:33%;
}

画像の上に文字を表示する

それぞれの画像の上に文字を表示してみましょう。pタグで文章を入れます。

<div class="box">
  <img class="image" src="https://manabu-biology.com/wp-content/uploads/2020/11/00164_01.png" alt="" />
  <p>HELLO!!</p>
</div>
<div class="box">
  <img class="image" src="https://manabu-biology.com/wp-content/uploads/2020/11/00164_01.png" alt="" />
  <p>Hi!!!</p>
</div>
<div class="box">
  <img class="image" src="https://manabu-biology.com/wp-content/uploads/2020/11/00164_01.png" alt="" />
  <p>SEE YOU</p>
</div>

画像の中央に表示するためには、pの親要素であるboxにposition: relative;を指定します。すると、その子要素にabsoluteを指定すると、boxを基準とした位置を指定できます。

absoluteで指定したpタグは、top:50%、left50%にすると、Pタグの右上が要素のど真ん中に配置されます。P要素の中央が、ど真ん中に来てほしいので、transform: translate(-50%, -50%);で補正します。

画像を中央寄せするためにblock要素にして、margin:0 auto;（魔法の言葉）を指定しています。また、わかりやすいようにborder入れています。

.box{
  float:left;
  width:33%;
　position: relative;
  border:solid;
}

.box p{
  text-align: center; 
  position:absolute; 
  top:50%; 
  left:50%; 
  transform: translate(-50%, -50%); 
  border:solid red;
}

.image{
  display:block; 
  margin:0 auto; 
  width:150px; 
}

Hello!!