今天來練習一下水平置中
在這裡

我們就在這裡結束吧!!

要是可以按一個鈕這麼簡單就好了!!

<div  class="intro">
  <p>Introduction</p>  
</div> 

.intro {
  font-size: 60px;
  color: #ff0000;
  background-color: #000;
  width:600px;
  text-align: center;
}

再來要置中，置中的按鈕呢？
我們用margin的方式來讓他置中吧！
在CSS 中加入

margin: 0 auto;

就可以達成置中的效果囉！！

magin的value可以寫到四個！
value的數量不一樣代表了不一樣的意思。

margin: 0px
/*同時設定上下左右margin*/
margin: 0px 0px
/*value1代表上下margin、value2代表左右margin*/
margin: 0px 0px 0px
/*value1代表上margin、value2代表左右margin、value3代表下margin*/
margin: 0px 0px 0px 0px
/*value1代表上margin、value2代表右margin、
value3代表下margin、value4代表左margin*/

這個方式是用於block element
像是<div>、<p>、<h1> 等

今天嘗試了水平置中的第一個方法，
在搜尋網路上前輩們的介紹看到了
block element和inline element的觀念，
想要先筆記一下。

block element : 就是一個區塊，有自己的高度 (height)也有寬度 (width)，佔據了一整行，除非用float。
inline element : Height and width 不能設定，elements 都會在同一行呈現。

有點攏統，
就還是實做一遍。

<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>

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

這裡可以看出 block佔據一整行的意思及 inline可以在同一行呈現 elements。
如果都加上

width: 300px
height: 50px

就可以了解到 width and height 可不可以設定了。