---
# System prepended metadata

title: text-align 文字水平調整 / 用 br tag 產生斷行
tags: [HTML、CSS]

---

# 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段落延伸出來的

![](https://i.imgur.com/Ekh2cfj.png)

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

  讓文字產生留白，看起來不這麼擠
  
```
.footer {
    background: pink;
    padding-top: 10px;
    padding-bottom: 10px;
}
```

![](https://i.imgur.com/2LZ03fB.png)


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

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

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

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

![](https://i.imgur.com/7nX7fXn.png)

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

以 footer 為例:

        <div class="footer">
            <p>苗栗縣頭份市上興里666號</p>
            <br> 037-123456
        </div>
        
在p段落下方寫入 br 可直接在 p 的下面一行直接產生新的內容

![](https://i.imgur.com/imhwG1A.png)

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