---
# System prepended metadata

title: "\U0001F3C5 Day 10 - margin: 0 auto、text-align 混合運用"
tags: [網頁切版直播班 - 2023 夏季班]

---

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

### text-align: center／left／right;
用於讓區塊內**文字**或**行內元素** 置中、置左或置右

### 題目
修改下方程式碼 `...` 部分，練習切出下方圖片樣式
（細節請參考課前最終作業一設計稿）
![](https://imgur.com/23IDM5B.png)


HTML：
```htmlembedded=
<div class="container">
  <h1 class="font-title">VITO</h1>
  <img class="header-img" src="https://github.com/hexschool/2022-web-layout-training/blob/main/2023week1/vito.png?raw=true" alt="header-img">
  <h2 class="font-title text-align-right">RESUME</h2>
</div>
```
CSS：
```css=
body {
  font-family: "Castoro", serif;
}
.container {
  width: 1296px;
  ...
}
.font-title {
  font-size: 128px;
  line-height: 1.5;
  letter-spacing: 0.12em;
}
.header-img {
  display: block;
  ...
}
.text-align-right {
  ...
}

```
>需載入字型資源

## 回報流程

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

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

<!-- 解答：https://codepen.io/jmimiding4104/pen/zYMOJVp  -->

回報區
---


||      Discord      |                          CodePen / 答案                           |
|:-----------------:|:-----------------:|:-----------------------------------------------------------------:|
| 01 |Moreene#6720|[CodePen](https://codepen.io/Moreene/pen/OJaxRVy?editors=1100)|
| 02 |kuanju27|[CodePen](https://codepen.io/Eero-Chiao/pen/LYXzRpq)|
| 03 |hebin.|[Codepen](https://codepen.io/landyhsiao776/pen/ExOwgVp)|
| 04 |murphy1665|[Codepen](https://codepen.io/icephy/pen/zYMEKva) |
| 05 |pinyi_9|[Codepen](https://codepen.io/Wpypy/pen/VwVMKeO) |
| 06 |Ann Chou#0146|[Codepen](https://codepen.io/annchou_illu/pen/RwqLGab) |
| 07 |阿榮#8277|[Codepen](https://codepen.io/codeitaday/pen/gOQGwPp?editors=1100)|
| 08 |awei|[Codepen](https://codepen.io/hong-wei/pen/bGQoweB?editors=1100)|
| 09 |ann6212|[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/OJaxRNM?editors=1100)|
| 10 |meowmeow|[Codepen](https://codepen.io/snow1224/pen/WNYZGop)|
| 11 |billy_ti|[Codepen](https://codepen.io/Ti-Show/pen/wvQrzoz)|
| 12 |Berlin|[Codepen](https://codepen.io/3qberlin/pen/bGQowBB)|
| 13 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/zYMEKra) | 
| 15 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/bGQowqg) |
| 16 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/NWEaRjp)|
| 17 | Kulimusoda | [Codepen](https://codepen.io/yuch3n_chen/pen/KKrXgqy) |
| 18 | SmallP | [Codepen](https://codepen.io/smallp/pen/poQWErp) |
| 19 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/RwqLGLP) |
| 20 |薯餅|[Codepen](https://codepen.io/ColdingPoTaTo/pen/YzRrGxz)|
| 21 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/mdQBrpV) |
| 22 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/QWJqKQq) |
| 23 | Eden.C |[Codepen](https://codepen.io/iseden/pen/rNQGMJq)|
| 24 | zhu.lin |[CodePen](https://codepen.io/codepenplayer/pen/GRwMjmp)|
| 25 | Morning#7336 | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/mdQBrXV?editors=1100) |
| 26 | Brian#7046 | [Codepen](https://codepen.io/PochienTsai/pen/zYMEKae) |
| 27 | m_m | [Codepen](https://codepen.io/minnn7716/pen/WNYZGKX) |
| 28 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/ZEmXpoj?editors=1100) |
| 29 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/ExOwgGJ?editors=0100) |
| 30 | .icesam | [Codepen](https://codepen.io/icesam/pen/yLQzaZq) |
| 31 | townyuan | [Codepen](https://codepen.io/townyuan/pen/MWzEjdz) |
| 32 | Tina02#2691 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/ExOwgBB) |
| 33 | 末次 | [Codepen](https://codepen.io/yunjulee/pen/wvQroMy) |
| 34 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/VwVMmMp) |
| 35 | 慈玲#8986 | [Codepen](https://codepen.io/vseznpoh-the-flexboxer/pen/zYMEopG) |
| 36 | Grass立花#8094 | [Codepen](https://codepen.io/kj25940858/pen/MWzEbRY) |
| 37 | Ting.66#0912 | [Codepen](https://codepen.io/Ting66/pen/eYQGgBd?editors=1100) |
| 38 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/JjerEEO) |
| 39 | elma.yo | [Codepen](https://codepen.io/ElmaYu/pen/zYMENZw) |
| 40 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/QWJqdOb) |
| 41 | MKL | [Codepen](https://codepen.io/Code-My/pen/QWJqdqb) |
| 42 | AAAAA | [Codepen](https://codepen.io/yvgxsirf-the-typescripter/pen/bGQogKN) |
| 43 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/poQWRKE) |
| 45 | yunhsinnnnnnn| [Codepen](https://codepen.io/yun___hsin/pen/QWJqdYE) |
| 45 | hao2485| [Codepen](https://codepen.io/Seanfeb16/pen/KKrXWdm) |
| 46 | xuan#0808| [Codepen](https://codepen.io/xuan0915/pen/XWyeMjY?editors=1100) |
| 47 | yun#5213 | [Codepen](https://codepen.io/yun-the-scripter/pen/ZEmXepr) |
| 48 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/XWyeMeP) |
| 49 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/jOQGBza) |
| 50 | 狸貓#5863 | [Codepen](https://codepen.io/tanuki320/pen/OJaxpvb) |
| 51 | 棠棠 | [Codepen](https://codepen.io/bobo52400/pen/LYXzWQK) |
| 52 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/bGQoqQr?editors=1100) |
| 53 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/JjerNdo) |
| 54 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/ExOwmPY) |
| 55 | robbie_0830 | [Codepen](https://codepen.io/ShuZhen/pen/LYXzyGG?editors=1100) |
| 56 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/vYQemxm?editors=1100) |
| 57 | celia#9182 | [Codepen](https://codepen.io/celia01/pen/RwqLVVg) |
| 58 | Long | [Codepen](https://codepen.io/Loonng/pen/XWyeRym) |
| 59 | Cura | [Codepen](https://codepen.io/curalin/pen/ExOwmzg?editors=1100) |
| 60 | Randy | [Codepen](https://codepen.io/landy510/pen/mdQBwdK?editors=1100) |
| 61 | Cosmos#9210 | [Codepen](https://codepen.io/violet7755/pen/bGQoRWX) |
| 62 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/rNQGwGy) |
| 63 | Uli | [Codepen](https://codepen.io/uli1313/pen/WNYZOLr) |
| 64 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/XWyeaRB) |
| 65 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/abQLyGM?editors=1100) |
| 66 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/QWJqMza) |
| 67 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/XWyeaoO) |
| 68 | 阿富#0389| [Codepen](https://codepen.io/spring40747/pen/vYQeJwK) |
| 69 | yuling#1634 |[Codepen](https://codepen.io/igzdflpu/pen/BaGwwzJ)|
| 70 | MarvinWu#8362 |[Codepen](https://codepen.io/chi-Wu/pen/jOQGGrv)|
| 71 | peggydbc1217 |[Codepen](https://codepen.io/peggydbc1217/pen/BaGwwQY)|
| 72 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/qBQPPRb) |
| 73 | homer#1525 | [Codepen](https://codepen.io/Buckhorn/pen/bGQoooj) |
| 74 | yu._liu | [Codepen](https://codepen.io/YuT200053/pen/poQWWWY) |
| 75 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/gOQgjEX)|
| 76 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/QWJdyER)|
| 77 | 墨莉 | [Codepen](https://codepen.io/hoku0306/pen/rNQGYBe) |
| 78 | lishuan | [Codepen](https://codepen.io/lishuan/pen/gOQGXbd?editors=1100) |
| 79 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/RwqLojL) | 
| 80 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/qBQPjEX) |
| 81 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/xxQXpwa?editors=1100) |
| 82 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/wvQrpKG) |
| 83 | Ryan Chiang#6649 | [Codepen](https://codepen.io/ryanchiang/pen/poQWpWd) |
| 84 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/MWzEEKZ?editors=1100)
| 85 | ga771058 | [Codepen](https://codepen.io/ppzigmtg-the-typescripter/pen/mdQBXbO)
| 86 | johnchien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/abQLqmb) |
| 87 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/bGQovpJ?editors=1100) |
| 88 | Pig#6093 | [Codepen](https://codepen.io/qnmcftqx-the-sans/pen/vYQejxB) |
| 89 | Lesly#1279| [Codepen](https://codepen.io/LeslyChang/pen/BaGwVvO) |
| 90 | Johnson3669| [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/NWEaLqr) |
| 91 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/MWzEqwv) |
| 92 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/wvQrEKM) |
| 93 | runweiting | [Codepen](https://codepen.io/weiting14/pen/yLQzxao) |
| 94 | Qi-Hua | [Codepen](https://codepen.io/emily40830/pen/BaGwYYx) |
| 95 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/NWEaLev) |
| 96 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/eYQGLXP?editors=1100) |
| 97 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/qBQPJWB) |
|98|PayRoom#8328|[CodePen](https://codepen.io/water38198/pen/gOQGBRG)
|99|+7|[CodePen](https://codepen.io/tojibom/pen/XWyexYJ)
|100|.manmanlai|[CodePen](https://codepen.io/kikiyang/pen/WNYZYoV?editors=0100)
|101|shcopy|[CodePen](https://codepen.io/shcopy/pen/ExOwGbd)|
| 102 | albee#9121|[Codepen](https://codepen.io/albee-chang/pen/JjerxKo)|
| 103 | green760223 | [Codepen](https://codepen.io/lawrence-yi-hsuan-chuang/pen/zYMEXrW) |
| 104 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/JjerQjE?editors=1100) |
| 105 | shawey.1a2b | [Codepen](https://codepen.io/Shawey/pen/ZEmXggq) |
| 106 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/LYXOPLG) |
|107 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/yLQPBZd) |
|108 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/gOQXYye) |
|109 | Pig | [Codepen](https://codepen.io/qnmcftqx-the-sans/pen/vYQejxB) |
|110 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/ExObxKN) |
|111 | rjjq | [Codepen](https://codepen.io/rjjq/pen/gOQXbVL) |
| 112 | .ztion | [Codepen](https://goo.gl/maps/mq9pxqveDJazBDby5)
| 113 | 0naomi0 | [Codepen](https://codepen.io/0Naomi0/pen/zYMPNWZ)
| 114 | DeLi #8324 | [Codepen](https://codepen.io/delichaomoon/pen/QWJOvwa)
| 115 | wind | [Codepen](https://codepen.io/wind7y/pen/rNQYmJE) |
| 116 | 莉塔#8500 | [Codepen](https://codepen.io/RitaWeng/pen/NWEwgrJ) |
| 117 | DoDo_0000 | [Codepen](https://codepen.io/MissDouble/pen/xxQPraX) |
| 118 | Martin | [Codepen](https://codepen.io/markyourpage/pen/OJaOjWP) |
| 119 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/BaGmymz) |
| 120 | .zack_p | [Codepen](https://codepen.io/Designer-PH/pen/PoxOjJx) |
| 121 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/VwVrzOw) |
| 122 | .elliehsu | [Codepen](https://codepen.io/ellieyuhsu0827/pen/VwVrMrj) 
| 123 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/rNQGwGy) |
| 124 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/bGQYYzb)|
| 125 | littlewhite2406 | [Codepen](https://codepen.io/gracewhite/pen/ZEmaxeG) |
| 126 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/XWyzBjX) |
| 127 | EmptyWu | [Codepen](https://codepen.io/emptywu/pen/BaGmbOb)|
| 126 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/poQdmva?editors=1100)|
| 127 | 阿沁#8176 | [Codepen](https://codepen.io/a8322342/pen/wvQPboe)|
| 128 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/eYQeqXr) |
| 129 | DoryH#0526 | [Codepen](https://codepen.io/dorihung/pen/eYQyOOK)) |
| 130 | ivy999 | [Codepen](https://codepen.io/ivy999/pen/VwVyeOo) |
| 131 | Randy | [Codepen](https://codepen.io/landy510/pen/jOQYwOQ?editors=1100) |
| 132 | Randy | [Codepen](https://codepen.io/ldddl/pen/abQEqYg) |
| 133 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/vYQpdQX) |
| 134 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/MWzrVYR) |
| 135 | SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/MWzrGNO) |
| 136 | csh97 | [Codepen](https://codepen.io/pyrbkvev-the-animator/pen/mdQpGOv) |
| 137 | xin#1214 | [Codepen](https://codepen.io/Estherrrrrr999/pen/jOQYedK) |
| 138 | bbbear#7545 | [Codepen](https://codepen.io/Bearice/pen/ExOoQjd?editors=1100) |
| 139 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/oNQGwOQ) |
| 140 | janshawns | [Codepen](https://codepen.io/Janshawn/pen/RwqjWqE) |
| 141 | janshawns | [Codepen](https://codepen.io/EY-chen/pen/yLQvKNR) |
| 142 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/dyQdeWm) |
| 143 | stoos_1369 |[Codepen](https://codepen.io/Stooss/pen/YzRevLP?editors=1100)|
| 144 | 拉斯卡爾 |[Codepen](https://codepen.io/novendia/pen/poQaZEQ)|
| 145 | peggy#3169 | [Codepen](https://codepen.io/peggylai/pen/qBQoqjQ?editors=1100) |
| 146 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/jOQzxRb) |
|147 |博派變形金剛#0959|[Codepen](https://codepen.io/chan-chen/pen/OJazyNE)|
| 148 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/dyQmEer) |
| 149 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/zYMjeEE) |
| 150 | MaciHuang#8798 | [Codepen](https://codepen.io/macy1215/pen/ExORKdQ) |
| 151 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/abQKBjq) |
| 151 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/rNQrNPq) |
| 152 | lin_lion | [Codepen](https://codepen.io/Lion-Lin/pen/BaGqVWY) |
| 153 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/KKrGeyJ?editors=1100) |
| 154 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/oNQQoJd?editors=1100) |
| 155 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/YzRRRQe?editors=1100) |
| 156 | ChrisSQR#3308 | [Codepen](https://codepen.io/ChrisSQR/pen/poQYgbo) 
| 157 | 柚子#3958 | [Codepen](https://codepen.io/as6625998/pen/PoxLBjj) |
| 158 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/xxQBoYx) |
|159|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/WNYVYvN)|
|160|Mia小福#4473|[Codepen](https://codepen.io/a0950271/pen/oNJpgrY?editors=1100)|
|161|楓|[Codepen](https://codepen.io/maplestartend/pen/bGZGKoB)|


<!--
| 0 | user | [Codepen]() |
-->

