# text-align 文字水平調整 / 用 br tag 產生斷行

- 再 web 設計的情況下，**文字一般來說預設皆為: 左**

那有些情況需要**置中**，我們該如何去設定?

- example:

HTML:

<div class="wrap">
<div class="header"></div>
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, totam?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, totam?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, totam?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic, totam?
</p>
</div>
<div class="footer">
<p>苗栗縣頭份市上興里666號</p>
</div>
</div>

CSS:

- footer 不留高度，並在段落

/* user */

.wrap {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    background: #000;
}

.header {
    height: 50px;
    background: red;
}

.content {
    /* height: 100px; */
    background: blue;
    padding: 20px;
}

.content p {
    color: white;
    margin-bottom: 30px;
}

.footer {
    background: pink;
}

會得到以下畫面:

- 可以看得出來 footer 高度是由 p段落延伸出來的


- 再 .footer 增加 padding top & bottom: 10px

讓文字產生留白，看起來不這麼擠

.footer {
    background: pink;
    padding-top: 10px;
    padding-bottom: 10px;
}


問題來了，我們會發現文字靠左對不對

如果我們想要**置中**該如何做呢?

- 直接在 .footer 加入 text-align: center

.footer {
    background: pink;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}


- 使用 `<br>` 產生段行:

以 footer 為例:

<div class="footer">
<p>苗栗縣頭份市上興里666號</p>
<br> 037-123456
</div>

在p段落下方寫入 br 可直接在 p 的下面一行直接產生新的內容


###### tags: `HTML、CSS`