如何在css中水平對齊元素？

Question

為了精確，我有一個div，我需要水平對齊內部元素。

你可以在這個Jsfiddle看到： https ：//jsfiddle.net/xxcm84x1/我的div內部元素的位置是相對的，但是它們是垂直對齊的，只需要將它改為水平。

HTML：

<div class="firstdiv">
  <div class="innerdiv"></div>
  <span class="firstspan">Align elements Horizontally <----></span>
</div>

CSS：

.firstdiv{
  position:absolute;
  height:40px;
  width:250px;
  background:white;
}
.innerdiv{
  position:relative;
  height:30px;
  top:5px;
  width:40px;
  background:green;
}
.firstspan{
  position:relative;
}

問候

Answer 1

display: flex父對象的display: flex會將子項放在水平行中。

 .firstdiv { position: absolute; height: 40px; width: 250px; background: white; display: flex; } .innerdiv { position: relative; height: 30px; top: 5px; width: 40px; background: green; } .firstspan { position: relative; } 

 <div class="firstdiv"> <div class="innerdiv"></div> <span class="firstspan">Align elements Horizontally</span> </div>