昨天用了margin: auto 0;
來達到水平置中，
今天來試試看用text-align: center;
來水平置中。
今天不找按鈕了。

text-align: center;主要用於inline elements，

<div class="animalmodel">
<span>Rabbit</ span>
<span>Rat</ span>
<span>Mice</ span>
</div>

.animalmodel {
  width: 360px;
  height: 50px;
  background-color: #0000ff;
}
span {
  background-color: #00ff00;
  font-size: 20px;
}

只要再父元素加上 text-align: center;就可以達到置中的效果了。

而在父元素下的 inline element都會有水平置中的效果。

display: inline block
同時具有inline elements及block elements的特性。
不會佔據一整行，也可以設定width和height。
用昨天的例子來試試看吧！

<div class="block">
  <p>Rabbit</p>
  <p>Rat</p>
  <P>Mice</p>
</div>
<div class="inline">
  <p>Rabbit</p>
  <p>Rat</p>
  <P>Mice</p>
</div>
<div class="inline-block">
  <p>Rabbit</p>
  <p>Rat</p>
  <P>Mice</p>
</div>

.block p {
  display: block;
  background-color: #ff0000;    
}
.inline p {
  display: inline;
  background-color: #00ff00;
}
.inline-block p {
  display: inline-block;
  background-color: #0000ff;
}

都加上
width: 100px;
height: 50px;
看看結果：

很明顯可以看到inline block同時具有inline elements及block elements的特性。

夯不啷噹也寫了六天
如果有甚麼認知錯誤寫錯的地方
還是很希望前輩能夠指點迷津