# 🏅 Day 10 - margin: 0 auto、text-align 混合運用

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

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

### 題目
修改下方程式碼 `...` 部分，練習切出下方圖片樣式
（細節請參考課前最終作業一設計稿）

HTML：

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

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://codepen.io/jmimiding4104/pen/zYMOJVp -->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | hao jing | [Codepen](https://codepen.io/hjxu/pen/NWZKaKg?editors=1100) |
| 2 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/MWMgEVL) |
| 3 | han | [Codepen](https://codepen.io/iamHanCheng/pen/zYQjXGb) |
|4|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/abgoLKb)|
| 5 | OSN |[Codepen](https://codepen.io/osncodepen/pen/abgoLQO)|
| 6 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/JjQPreG?editors=1100)|
| 7 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme)|
| 8 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/jOjNGXQ) |
| 9 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/mdZbBaM) |
| 10 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/rNEBGrE) |
| 11 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/BagBwXV) |
| 12 | TONY名彤 | [Codepen](https://codepen.io/Ming-Tung-Chien/pen/WNqeZWa) |
| 13 | Mike | [Codepen](https://codepen.io/mike2049/pen/KKjPyPE?editors=1100) |
| 14 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/LYKPOEx) |
| 15 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/wvLwPaE) |
| 16 | Chloe_墨 | [Codepen](https://codepen.io/ChloeTseng1026/pen/XWLrzNX) |
| 17 | 爆漿 | [Codepen](https://codepen.io/dhpsxzwh-the-decoder/pen/oNrvoBe) |
| 18 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/QWXLOBL) |
| 19 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/GRbKOXw?editors=1100) |
| 20 | PoWei | [Codepen]( https://codepen.io/Po-Wei-Lai/pen/VwJZrGx) |
| 21 | wind | [Codepen](https://codepen.io/wind7y/pen/OJeLOGY) |
| 22 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/zYVOpxE) |
| 23 | David1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/vYqBppq?editors=1100) |
| 24 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/GRbKyXJ) |
| 25 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/dyBbJgE) |
| 26 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/QWXLaRM?editors=1100) |
| 27 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/jOjNZEY) |
| 28 | 瑞斯Darius_TszYing | [Codepen](https://codepen.io/bekgnohe-the-selector/pen/NWZKyGv) |
| 29 | kawa | [Codepen](https://codepen.io/z83xji6/pen/ZEdzrWM) |
| 30 |Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/wvLwyoq?editors=1100) |
| 31 | n913239 | [Codepen](https://codepen.io/n913239/pen/qBzWxod) |
| 32 | Kim | [Codepen](https://codepen.io/kim0101__/pen/mdZbXLm) |
| 33 | wei | [Codepen](https://codepen.io/Wei-the-sasster/pen/MWMgVOw?editors=1100) |
| 34 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/KKjPooK) |
| 35 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/mdZbxxj) |
| 36 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/vYqBRza?editors=1100)|
| 37 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/dyBbmBK?editors=1100)|
| 38 | KUN. | [Codepen](https://codepen.io/barry91205/pen/yLdBjya) |
| 39 | Jim | [Codepen](https://codepen.io/JimChou/pen/abgoGbV?editors=0110) |
| 40 | Ho | [Codepen](https://codepen.io/JasonHo_HYC/pen/XWLrqKe) |
| 41 | aura | [Codepen](https://codepen.io/AURATAO/pen/XWLrqMV) |
| 42 | glen_69515 | [Codepen](https://codepen.io/glenyaochih/pen/ExBYLOe) |
| 43 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/vYqBjMY?editors=1100) |
| 44 | MY | [Codepen](https://codepen.io/ahmomoz/pen/JjQPvqz) |
| 45 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/xxoKzKB) |
| 46 | N7 | [Codepen](https://codepen.io/neohyntw/pen/oNrvypj) |
| 47 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/KKjPeJb) |
| 48 | chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/QWXLQWq) |
| 49 | yoishere | [Codepen](https://codepen.io/yoishere/pen/yLdBxeV) |
| 50 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/OJeLojP)
| 51 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/QWXLVYv?editors=1100) |
| 52 | skyderry | [Codepen](https://codepen.io/hvvjvkva-the-sasster/pen/yLdBRej) |
| 53 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/RwzbeRa) |
| 54 |嚼勁 | [Codepen](https://codepen.io/James520284/pen/KKjPbya) |
| 55 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/dyBbaeM) |
| 56 | lianne.. | [Codepen](https://codepen.io/Elaina-L/pen/VwJZJXy) |
| 57 | icesea25 | [Codepen](https://codepen.io/icesea25/pen/vYqBMVo) |
| 58 | 小咪 | [Codepen](https://codepen.io/iloveu3000x/pen/mdZbZgz) |
| 59 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/bGPGNEG)|
| 60 | Theodore |[Codepen](https://codepen.io/GustavoFringgg/pen/NWZWPMr)|
| 61 | 邵 |[Codepne](https://codepen.io/ukscrlno-the-typescripter/pen/xxoxGPv?editors=1100)|
| 62 | 俊 |[Codepen](https://codepen.io/jun12079/pen/vYqYOdK)|
| 63 | ss585801. |[Codepen](https://codepen.io/ss585801/pen/GRbRJPE?editors=1100)|
| 64 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/QWXWjBX) |
| 65 | 喵喵 | [Codepen](https://codepen.io/snow1224/pen/mdZdPXO) |
| 66 | Enn | [Codepen](https://codepen.io/enntang/pen/PorozNR) |
| 67 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/gONOMLe) |
| 68 | xcx100 | [Codepen](https://codepen.io/c13026/pen/gONOMge) |
| 69 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/rNENjEW?editors=1100) |
| 70 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/LYKYjLr) |
| 71 | .sytiny | [Codepen](https://codepen.io/emma6542/pen/dyByVPB?editors=1100) |
| 72 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/jOjOaqX?editors=1100) |
| 73 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/WNqNzxa?editors=1100) |
| 74 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/ExBxOWj?editors=1100) |
| 75 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/RwzwqZL) |
| 76 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/xxoxQjE) |
| 77 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/KKjKYJa) |
| 78 | iamcan | [Codepen](https://codepen.io/uhnxswdq-the-typescripter/pen/BagaXwX?editors=1100) |
| 79 | smallr1229 | [Codepen](https://codepen.io/Smallr/pen/wvLvVGb) |
| 80 | emmayo | [Codepen](https://codepen.io/emmayo/pen/OJePPGP) |
| 81 | neoyo | [Codepen](https://codepen.io/Neo-oo/pen/jOjEEoV) |
| 82 | MYP | [Codepen](https://codepen.io/pmyfr/pen/eYwmZBM) |
| 83 | jamesct34 | [Codepen](https://codepen.io/JCT34/pen/MWMWZwK) |
| 84 | Toro | [Codepen](https://codepen.io/andawu/pen/MWMYJvR) |
| 85 | Matt BB | [Codepen](https://codepen.io/mm3248965/pen/gONbGLp) |
| 86 | macihuang | [Codepen](https://codepen.io/macy1215/pen/YzoPOpa) |
| 87 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/jOjEQVp) |
| 88 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/ExBjYeO) |
| 89 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/RwzPqjo) |
| 90 | chris | [Codepen](https://codepen.io/chrischen666/pen/gONpqWV?editors=1100) |
| 91 | zen | [Codepen](https://codepen.io/zen742937/pen/rNEVRyo) |
| 92 | Lobinda | [Codepen](https://codepen.io/Lobinda/pen/GRbJaZL) |
| 93 | 小翎 |[CodePen](https://codepen.io/debbielin/pen/JjQdgWb?editors=1100)|
| 94 | xiang |[CodePen](https://codepen.io/XIANG-XIANG/pen/abgvONV)|
| 95 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/XWLmbLB) |
| 96 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/eYwpzeQ) |
| 97 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/WNqQLMP) |
| 98 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/abgvPam) |
| 99 | 白夜 | [Codepen](https://codepen.io/Wei903/pen/ExBVraW) |
| 100 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/JjQXbpy) |
| 101 | atien0816 | [Codepen](https://codepen.io/Ben-Atien/pen/poXyGbX) |
| 102 | LKP | [Codepen](https://codepen.io/qtghjujs-the-sasster/pen/ExBKrZy?editors=1100) |
| 103 | Show21 | [Codepen](https://codepen.io/t10026706/pen/eYwdpMW?editors=1100) |
| 104 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/LYKRwPJ) |
| 105 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/BagQvBX?editors=1100)|
| 106 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/oNrBOzq)|
| 107 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/dyBvwXJ)|
| 108 | Toung | [Codepen](https://codepen.io/Toung/pen/ZEdKJBG) |
| 109 | Emma | [Codepen](https://codepen.io/Emma0919/pen/oNrwxOO) |
| 110 | lynee1211 | [Codepen](https://codepen.io/ntibaiss-the-solid/pen/wvLqREx?editors=1100) |
| 111 | 星雨 | [Codepen](https://codepen.io/ybxyuhcv-the-solid/pen/XWLaGGo) |
| 112 | Judy | [Codepen](https://codepen.io/yangchi/pen/rNEYxqg) |
| 113 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/bGPvOXw) |
| 114 | dd_501 | [Codepen](https://codepen.io/daiyy97/pen/XWLBZMa) |
| 115 | Haru | [Codepen](https://codepen.io/yology/pen/ZEdVwmz) |
| 116 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/bGPZPZZ?editors=1100) |
| 117 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/WNqWYJY?editors=1100) |
<!--
| No | Discord | [Codepen]() |
-->