---
# System prepended metadata

title: "\U0001F3C5 Day 10"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 10

## margin: 0 auto; 與 text-align: center;

### margin: 0 auto;
用於讓**區塊**水平置中
**注意：需與 width 寬度搭配使用才會呈現區塊置中效果**

### text-align: center;
用於讓區塊內**文字**或**行內元素**置中

### 題目
修改下方程式碼 `...` 部分，練習切出下方圖片樣式
![](https://i.imgur.com/biGUBYr.png)

HTML：
```htmlembedded=
<div class="container bg-primary py-3">
  <div class="container-sm">
    <h1 class="title text-white">網頁切版直播班</h1>
    <ul class="list text-white">
      <li>CSS 技術全都要</li>
      <li>HTML、CSS</li>
      <li>RWD</li>
      <li>Bootstrap5</li>
      <li>Tailwind</li>
    </ul>
  </div>
</div>
```
CSS：
```css=
body {
  line-height: 1.5;
}

.py-3 {
  padding-top: 24px;
  padding-bottom: 24px;
}

.bg-primary {
  background-color: #415165;
}

.text-white {
  color: #fff;
}

.container {
  ...
}

.container-sm {
  ...
}

.title {
  font-size: 32px;
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #fff;
  ...
}

.list {
  font-size: 24px;
  line-height: 1;
  padding-left: 24px;
  border-left: 1px solid #fff;
  ...
}

.list li:not(:last-child) {
  margin-bottom: 16px;
}
```


## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：https://codepen.io/hexschool/pen/NWyZxaW?editors=1100 -->

回報區
---


|      Discord      |                                CodePen / 答案                                |
|:-----------------:|:----------------------------------------------------------------------------:|
|    薏慈#3795    |              [Codepen](https://codepen.io/its_wang/pen/qBoYqvo)              |
|    Anna Liu#3794    |              [Codepen](https://codepen.io/anna618/pen/jOzVJPw)              |
|    小鐵#2814    |              [Codepen](https://codepen.io/xiron/pen/JjLKvyO)              |
|    Benson#6763    |              [Codepen](https://codepen.io/kumashow/pen/abYzQWG)              |
|     𝓛𝓊𝒸𝓎#8635     |              [Codepen](https://codepen.io/lucygirl/pen/zYWxQRK)              |
|    SASIMI#5099    |            [Codepen](https://codepen.io/sashimi1327/pen/BarNjqm)             |
|     Chi#7605      |              [Codepen](https://codepen.io/YoChi84/pen/rNdeLVB)               |
|   Amberhh#2465    |        [Codepen](https://codepen.io/Amberhh/pen/YzaqWXV?editors=1100)        |
|    布魯諾#7239    |              [Codepen](https://codepen.io/bruno-yu/pen/oNqxLgY)              |
|    JackC#0411     |              [Codepen](https://codepen.io/key0329/pen/JjLXKdX)               |
|    黑白兔#0684    |             [Codepen](https://codepen.io/johnny329/pen/poLybyB)              |
|    Clara#1275     |       [Codepen](https://codepen.io/bsupixqu/pen/ZExWOQg?editors=1100)        |
|  Karol-Kuo#5287   |            [Codepen](https://codepen.io/ting-yu-kuo/pen/gOerMrv)             |
|    JAMES#8602     |              [Codepen](https://codepen.io/hong-wei/pen/QWmNEpo)              |
|    黃士桓#7654    |           [codePen](https://codepen.io/shr-huan-huang/pen/wvmGWgE)           |
|  Iris Huang#6727  |              [CodePen](https://codepen.io/ythuang/pen/BarKzJG)               |
|   Daisy_li#4231   |        [CodePen](https://codepen.io/lidairong-gmail-com/pen/ZExWOGd)         |
|     洋蔥#5295     |         [CodePen](https://codepen.io/HSUNA/pen/JjLXKbR?editors=1100)         |
|   WEI_RIO#9342    |        [CodePen](https://codepen.io/wei_wu/pen/WNzwxdW?editors=1100)         |
|   Jenny真#7532    |      [CodePen](https://codepen.io/wei-chen-wu/pen/wvmGWrQ?editors=1100)      |
| JingXuanLin#3371  |             [Codepen](https://codepen.io/YouShuang/pen/abYNZRJ)              |
|      Ke#1391      |             [Codepen](https://codepen.io/federerke/pen/xxWVOad)              |
|     yuyu#6310     |       [Codepen](https://codepen.io/yuyu0905/pen/wvmGWNZ?editors=1100)        |
|    Cliff#4606     |             [Codepen](https://codepen.io/Cliff_hex/pen/JjLXKVr)              |
|  LHchien33#6232   |             [Codepen](https://codepen.io/lin_chien/pen/ExEKyqX)              |
|      peter#0      |       [Codepen](https://codepen.io/hexschool/pen/NWyZxaW?editors=0100)       |
|   ajhappy#6488    |            [Codepen](https://codepen.io/ajhappy5438/pen/abYNmoy)             |
|     威爾#1694     |              [CodePen](https://codepen.io/WILL_Wu/pen/jOzqMEP)               |
|     小白#2406     |             [CodePen](https://codepen.io/gracewhite/pen/wvmGWXN)             |
|   LinaChen#1796   |              [CodePen](https://codepen.io/LinaChen/pen/OJvNRWK)              |
|     Sin#0040      |        [CodePen](https://codepen.io/sophmfyt-the-sasster/pen/poLyEWR)        |
|     int#7518      |       [Codepen](https://codepen.io/intHuang/pen/eYMZdEE?editors=1100)        |
|     威0#6919      |            [Codepen](https://codepen.io/n0918679182/pen/LYdNRRr)             |
|  PeggyLiao#1552   |      [CodePen](https://codepen.io/PeiJu-Liao/pen/yLKOapM?editors=1100)       |
| bonnieli1414#4906 |            [CodePen](https://codepen.io/bonnieli1414/pen/LYdNRMq)            |
|    Arista#5802    |            [CodePen](https://codepen.io/arista-hsieh/pen/poLyNzd)            |
|     得源#8355     |              [CodePen](https://codepen.io/aglgvsie/pen/ZExWpgx)              |
|     Pony#6778     |              [CodePen](https://codepen.io/Pony0303/pen/PoRNbwN)              |
|     LINK#1933     |              [CodePen](https://codepen.io/miyayoe/pen/jOzqVra)               |
|    pidder#7315    |             [CodePen](https://codepen.io/pidderliao/pen/rNdeMem)             |
|     yu魚#1330     |               [CodePen](https://codepen.io/Yu_yu/pen/OJvNbjp)                |
|     群嘉#3943     |        [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/Yzaqpeq)        |
|    Henry#7386     |               [CodePen](https://codepen.io/h1nr9/pen/yLKOVxR)                |
|    Aritan#1931    |               [CodePen](https://codepen.io/Aritan/pen/xxWVgLE)               |
|  Kevin8349#6131   |        [CodePen](https://codepen.io/xlqjezvc-the-encoder/pen/RwMaKGL)        |
|      YI#0863      |        [CodePen](https://codepen.io/YI0305/pen/zYWqNeN?editors=1100)         |
|   吉米阿民#8049   |             [CodePen](https://codepen.io/yinminlin/pen/OJvNWYq)              |
|     東懂#3762     |              [CodePen](https://codepen.io/tone-lee/pen/QWmNpGj)              |
|     雷雷#7844     |             [Codepen](https://codepen.io/lei-yi-jie/pen/RwMapRE)             |
|    阿基基#2557    |              [Codepen](https://codepen.io/JIJI_GNI/pen/vYRGxXQ)              |
|    Chaoci#2460    |             [CodePen](https://codepen.io/gmailchao/pen/MWVypEp)              |
|     鴨鴨#9822     | [CodePen](https://codepen.io/qrvrqvxv-the-selector/pen/GRxZWMb?editors=1100) |
|     hsiu#8767     |       [CodePen](https://codepen.io/amy-hsiao-the-scripter/pen/mdxPWjN)       |
|     zera#6060     |             [CodePen](https://codepen.io/zera-tseng/pen/BarKWbK)             |
|     Vian#7338     |              [CodePen](https://codepen.io/vianwu31/pen/XWEdRJB)              |
|   Fanglin#4054    |            [Codepen](https://codepen.io/flynn841028/pen/VwXabrv)             |
|  jin.huang#4666   |        [Codepen](https://codepen.io/HJ7878/pen/JjLXNqd?editors=1100)         |
|     狸貓#5863     |             [Codepen](https://codepen.io/tanuki320/pen/xxWVrPR)              |
|     大衛#4869     |       [Codepen](https://codepen.io/exnsrpjc/pen/ZExWyMb?editors=1100)        |
|   Jamie Wu#9345   |              [CodePen](https://codepen.io/Wu220103/pen/OJvNgeq)              |
|   Winnie Wu#5468   |              [CodePen](https://codepen.io/Pooh-Wu/pen/abYNmGK?editors=1100)              |
|     QOO#8446     |             [Codepen](https://codepen.io/QOOQOOQ/pen/GRxZEeY)              |
|Grass立花#8094|[CodePen](https://codepen.io/kj25940858/pen/NWYNvrW)|
|Barret#1119|[CodePen](https://codepen.io/barret0720/pen/JjLXyKp)|
|RANDY #0393|[CodePen](https://codepen.io/randy820113/pen/wvmGqgw)|
|Vera#5592|[CodePen](https://codepen.io/skvera/pen/mdxPMpY)|
|Joyce#3790|[CodePen](https://codepen.io/joycehuang/pen/GRxZvEa?editors=1100)|
|Tuhacrt#0008|[CodePen](https://codepen.io/Tuhacrt/pen/wvmGrZy)|
|Melon#0380|[CodePen](https://codepen.io/BalaFang/pen/qBoZXjK)|
Erwin#9851|[codepen](https://codepen.io/c-hao-tsai/pen/bGvpYBx)
|suihsilan#9485|[CodePen](https://codepen.io/suihsilan/pen/VwXaMOK?editors=1100)|
| Yunei#6323 |[CodePen](https://codepen.io/Yunei/pen/yLKOPLZ)|
| ssozr#4680 |[codepen](https://codepen.io/ssozr/pen/vYRGpYa)|
| 小諾#1866 |[codepen](https://codepen.io/noichan/pen/OJvNjpK)|
| Jason1#2538 | [codepen](https://codepen.io/jotwxezb-the-encoder/pen/KKozZEm) |
| smallmi80#3735 | [codepen](https://codepen.io/smallmimi80/pen/LYdNjgX) |
|Sentiments#4883 |[codepen](https://codepen.io/Sentiments/pen/RwMaxzb)
|GARBO#6659 |[codepen](https://codepen.io/garbo8130/pen/jOzqZbL?editors=1100)
| 我是泇吟 #5189 | [codepen](https://codepen.io/kljuqbxs/pen/gOervPP) |
| 浪裡小白龍#6860 | [codepen](https://codepen.io/Emillo/pen/VwXaXap?editors=1100) |
|    YU #0618    |[Codepen](https://codepen.io/yoken_/pen/mdxPxLx?editors=1100)|
|    咻蹦#1526    |[Codepen](https://codepen.io/emmasyu/pen/XWEdqga?editors=1100)|
|    IreneY #0086    |[Codepen](https://codepen.io/HalfPlannedJourney/pen/abYNaZL)|
|Ryan Chiang #6649|[Codepen](https://codepen.io/ryanchiang/pen/bGvpxmE?editors=1100)|
|mei#8421|[Codepen](https://codepen.io/Shila-Chen/pen/rNdeZbJ)|
|Yuna Huang #2692|[Codepen](https://codepen.io/Yuna1002/pen/NWYNdWB?editors=1100)|
| Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/LYdNgjw)|
| yuchenye#6119 | [Codepen](https://codepen.io/yuchen/pen/KKozxKw?editors=1100)|
| jeter#8014 |[Codepen](https://codepen.io/gi-tai-she/pen/jOzqeQx?editors=1100)|
| 溡月#2553 |[Codepen](https://codepen.io/winterwinterpu/pen/RwMaqbp)
| erwin阿瀚#5422 |[Codepen](https://codepen.io/yohey03518/pen/XWEdyBX)|
| NeilLin#3009 |[Codepen](https://codepen.io/a0071421/pen/gOerQEd)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/MWVyLXq)|
| Cream #3449| [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/ExEKMoP)|
| 鉦勝 #8333| [CodePen](https://codepen.io/atckmax823/pen/vYRGPoj)|
|wlc #4877| [CodePen](https://codepen.io/arxmyifs/pen/GRxZwrO?editors=1100)|
|skypassion5000#4151| [CodePen](https://codepen.io/skypassion5000/pen/abYNrZQ?editors=1100)|
| 連小艾#7901 | [CodePen](https://codepen.io/bolaslien/pen/MWVydeQ) |
| Susie(軒)#6181 | [CodePen](https://codepen.io/Codeleaf/pen/WNzxNyP) |
| 楓之聲#6945 |            [CodePen](https://codepen.io/sshane258/pen/QWmEwMb)            |
|鎔瑄#8578|[Codepen](https://codepen.io/barbarayou/pen/PoRzwRr)|
|逸川#6319| [CodePen](https://codepen.io/bryanlin8911/pen/KKoMwEa)|
|hunset35#3186| [Codepen](https://codepen.io/hunset35/pen/WNzxGVG)|
|mickey#8745| [Codepen](https://codepen.io/weizhetseng/pen/KKoMWJN)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/LYdZjyQ)|
| Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/vYRKJQb)|
|Ron Liang #7277| [Codepen](https://codepen.io/ron-go/pen/ZExOJZy)|
|YaWen #2752| [Codepen](https://codepen.io/yuwendy/pen/eYMzeRw)|
|肯肯#1576| [Codepen](https://codepen.io/kkwcan/pen/YzaWYze)|
| 肉魚#2149 | [Codepen](https://codepen.io/zoechen13/pen/poLbKjP)|
|Jean Hung #7151| [Codepen](https://codepen.io/jean8602/pen/RwMRaOG)|
|Halla#0431| [Codepen](https://codepen.io/wawykddh-the-typescripter/pen/ExEypxz)|
|Shuo#1596| [Codepen](https://codepen.io/chiangchungshuo/pen/eYMzQJx)|
| Kiwi#9804 | [Codepen](https://codepen.io/kiwi1113/pen/bGvePZm) |
| JarDar #6980 | [codepen](https://codepen.io/jardarpen/pen/gOewYOV) |
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/dympPJm)||
|阿蘇#8531|[CodePen](https://codepen.io/susu8327/pen/oNqzzGp?editors=1100)|
|Andy Hung#3335|[CodePen](https://codepen.io/andyhung0723/pen/poLEdxG)
|Leo Song #8278|[Codepen](https://codepen.io/sunnylaba/pen/XWEjzQW?editors=1100)|
| Manson許 #2295 | [Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/LYdRXZP) |
| kancheng#3915 | [Codepen](https://codepen.io/kancheng/pen/gOeLbav) |
|阿翰 #1984|[Codepen](https://codepen.io/JohnHan05/pen/mdxOVbM)|
|Clara Cai#7097|[Codepen](https://codepen.io/Clara-Snowy/pen/yLKVOea)|
|Tori #1248|[Codepen](https://codepen.io/FlyTori/pen/ZExBOEo)
|Kevin #6131|[Codepen](https://codepen.io/xlqjezvc-the-encoder/pen/NWYbdmM)
|ROKA #4051|[Codepen](https://codepen.io/chengchiaoyi/pen/rNdWzre?editors=1100)
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/qBoqVPe)
|Nathan James#8120|[Codepen](https://codepen.io/ufo060204/pen/VwXmWOK)
|Carrie#2750|[Codepen](https://codepen.io/carrie-wang/pen/PoRbroP)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/BarLrzZ?editors=1100)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/WNzRvXv) |
|肉桂卷#0625|[Codepen](https://codepen.io/ginnlee/pen/abYpyRZ?editors=1100)|
|瑞瑞#4605|[Codepen](https://codepen.io/tsai-li-ting/pen/jOzyamw)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/xxWgWrm)|
|EmilyLin#0526|[Codepen]()|
|RayChen#6088|[Codepen](https://codepen.io/raychen1996/pen/OJvpLKL)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/XWEMrQa)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/jOzBwGB)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/yLKMEML)
|紙飛機#1335|[CodePen](https://codepen.io/paperplanea/pen/jOzBjmM)|
|WEI#0797|[CodePen](https://codepen.io/wei-z/pen/gOeWKWe)|
|yuling#1634|[Codepen](https://codepen.io/igzdflpu/pen/xxWdBMJ)|
|CJ07#0176|[Codepen](https://codepen.io/cjtseng07/pen/abYwOZz)|
|KarenChan#4625|[Codepen](https://codepen.io/ruruchan7/pen/MWVEKwj)|
|rueee#7997|[Codepen](https://codepen.io/Jull-C/pen/dymVjOv)|
|鄭小蛙#3528|[Codepen](https://codepen.io/libclf/pen/oNqoezE)|
|Rena#6249|[Codepen](https://codepen.io/aureate0116/pen/NWYXZxv?editors=1100)
Jumpye#8601|[Codepen](https://codepen.io/Jumpye/pen/VwXQeqX?editors=1100)
|RuoAn#7124|[Codepen](https://codepen.io/LiauRuoAn/pen/YzaeBNJ)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/vYRjNQO)|
|DoraHunag#8223|[Codepen](https://codepen.io/mwebwvuq-the-flexboxer/pen/BarMXWV)
|心幻羽#0056|[Codepen](https://codepen.io/linglingsyu/pen/PoRgMNW)