--- tags: 網頁切版直播班 - 2021 夏季班 --- # 7/13(二) 每日任務 ## 題目 請試著加上 flex 屬性讓 logo 圖片在垂直水平置中的位置，如圖： ![](https://i.imgur.com/qWEVuCO.png) HTML ```htmlembedded= <div class="box"> <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="150"> </div> ``` CSS ```css= .box{ background-color: #e8eeea; width: 300px; height: 300px; } ``` ## 回報流程 1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～解答請參考下方 ![](https://i.imgur.com/vftL5i0.png) <!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/BajrEVd) --> 回報區 --- <!-- 0. Bingbingboom（回報範例，請使用註解回報） Codepen：https://codepen.io/Bingbingboom/pen/mdWXXEo --> <!-- 1. 焦糖 Codepen: https://codepen.io/yen-kg/pen/yLMjjOx --> <!-- 2.孫 https://codepen.io/Sunne/pen/abJMJob --> <!-- 3. 蔡明達 Codepen: https://codepen.io/bmzpfyxe/pen/NWpegvz?editors=1100 --> <!--4.jasmin codepen:https://codepen.io/thejasmin/pen/WNpEpBX --> <!--5.陳sam codepen:https://codepen.io/euldpliv/pen/qBmqMJL --> <!-- 6.肉鬆 codepen: https://codepen.io/klrkicog/pen/vYmyzVo --> <!-- 7.葉小嵐 codepen: https://codepen.io/una607/pen/jOmVvQm --> <!-- 8. Vic codepen:https://codepen.io/hsuan333/pen/xxdRaQy --> <!-- 9. Cora codepen: https://codepen.io/chakrafiregirl/pen/WNjogYR --> <!-- 10. Fleur codepen: https://codepen.io/swwlee/pen/rNmWZPv --> <!-- 11. Cheng Pei-hsuan codepen: https://codepen.io/PaCheng/pen/LYybJqa --> <!-- 12. Jean codepen: https://codepen.io/jean-liu/pen/abWBaXR --> <!-- 13. Lina Chen codenpen: https://codepen.io/LinaChen/pen/YzVpOgm --> <!-- 14. LiShang codenpen: https://codepen.io/li-shang/pen/abWBaeP --> <!-- 15. YuriT codenpen: https://codepen.io/wenfisht/pen/rNmWqNr --> <!-- 16. 吐司 codenpen: https://codepen.io/danielle-zhang/pen/OJmbBPR --> <!-- 17.黃羽均 https://codepen.io/azzfgtpo/pen/ExmNdjG --> <!-- 18. Sz https://codepen.io/szyln/pen/abWBRdM--> <!-- 19. Sam li codepen: https://codepen.io/sam830623/pen/vYmyVKN --> <!--Alpha codepen:https://codepen.io/alphatero/pen/vYmyVmG --> <!-- 21. kane0927 codepen: https://codepen.io/kane-lin/pen/PombybW --> <!-- 22. Cate Chang codepen: https://codepen.io/tutz/pen/gOWLBWg --> <!-- 23. Jun Chan codepen: https://codepen.io/chujunchan/pen/WNjoaOd --> <!-- 24. 大衛 codepen: https://codepen.io/exnsrpjc/pen/gOWLBRg--> <!-- 25. Xing codepen: https://codepen.io/xing10/pen/GRmNYMr --> <!-- 26. natsu codepen: https://codepen.io/natsu19/pen/mdmOzXR --> <!-- 27. Joy Cheng codepen: https://codepen.io/joycheng5432/pen/BaRQqVm --> <!-- 28. hellocrab https://codepen.io/hellocrab/pen/ExmNddY --> <!-- 29. lumei https://codepen.io/l_umei/pen/eYWBPQo --> <!-- 30. Archie https://codepen.io/WuChengHua/pen/yLbVRGG --> <!-- 31. 阿和 https://codepen.io/shnny/pen/zYwomQY --> <!-- 32. 雷古娜 https://codepen.io/tinahopo/pen/XWRNxGv --> <!-- 33. huanan https://codepen.io/hua_nan/pen/JjNbePX--> <!-- 34. Gui https://codepen.io/guitimliu/pen/gOWLQav --> <!-- 35. Kaka https://codepen.io/potatokaka/pen/eYWBQgm --> <!-- 36： RitaHuang https://codepen.io/Rita-Rossweisse/pen/gOWbOde?editors=1100 --> <!-- 37： Yao Lin https://codepen.io/yaoyaoiii/pen/xxdRQqE --> <!-- 15.Scarlett史嘉 https://codepen.io/qoxttdjg-the-encoder/pen/MWmbzXa --> <!-- 16. 林雨樞 https://codepen.io/FISH0701/pen/yLbVRNK --> <!-- 17. Eric-小偉哥 https://codepen.io/pen/ --> <!-- 18. ZY Hsu https://codepen.io/zihyin/pen/ExmNOBX --> <!-- 19. Yen https://codepen.io/Hoyi/pen/YzVpdPO --> <!-- 20. 阿熊 codepen https://codepen.io/hsiungchi/pen/oNWYJZP --> <!--21. Peggy Tsai https://codepen.io/pei-chi-tsai/pen/wvdoRmM --> <!--22. 童筱涵 https://codepen.io/hsiaohan/pen/OJmbraM --> <!--23. Kin Hei Shing https://codepen.io/kinhei-shing/pen/RwVoEOw --> <!--24. Gill https://codepen.io/Gill-Chin/pen/mdmOvmE --> <!--25. yijun https://codepen.io/sandy3068/pen/mdmOvXO --> <!-- 50. 魚魚 codepen: https://codepen.io/YuYu_29/pen/oNWYmOL --> <!-- 51：Riley codepen: https://codepen.io/jjpxbprd/pen/vYmybqm --> <!-- 52:sans-ge codepen: (https://codepen.io/AliceChiang/pen/BajrEVd) --> <!-- 53:Irene Wang codepen: https://codepen.io/irene-wang-the-looper/pen/NWjbJKB --> <!--54.阿瓜 https://codepen.io/hoick/pen/ExmNGzd --> <!-- 55. Elaine Liu codepen: https://codepen.io/elaine7598/pen/OJmbqpw --> <!-- 56.Shani https://codepen.io/ShaniMa/pen/VwbmREQ--> <!-- 57.Sylvia-H https://codepen.io/Cosmosheart/pen/BaRQELB?editors=1100--> <!-- 58.jimmyFang https://codepen.io/pohxiqqo/pen/zYwoXRR --> <!-- 59:PHIL codepen: https://codepen.io/ctkeftjp-the-animator/pen/NWjbmax --> <!-- 60:peter.chen1024 https://codepen.io/JIAN-RONG/pen/GRmNLOV?editors=1100 --> <!-- 61:Winnie https://codepen.io/winnie0208/pen/ExmNzVG --> <!-- 62:roger https://codepen.io/rogerchuang/pen/abWBRbP?editors=1100 --> <!-- 63:Joanna chang https://codepen.io/polilu1985/pen/OJmbYQg --> <!-- 64:粘勝凱 https://codepen.io/szykttdy/pen/VwbmOgK --> <!-- 65:Nate Lu https://codepen.io/nate12/pen/wvdobOy --> <!-- 66:Coco https://codepen.io/coco35532442/pen/RwVomEp --> <!-- 67 Karen Huang https://codepen.io/Coding_Snorlax/pen/poPNXWM --> <!-- 67 Meng https://codepen.io/MGHN/pen/KKmNjoO --> <!-- 69 叻叻豬 https://codepen.io/ericxcode/pen/dyWOBxe --> <!-- 70. Tina Yen codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/poPNMvg --> <!--71 icy codepen:https://codepen.io/ccsbjzze-the-sasster/pen/QWvGeMN --> <!--72 anna codepen:https://codepen.io/annhys/pen/OJmbKdM --> <!-- 73. 黃士桓 codepen:https://codepen.io/shr-huan-huang/pen/mdmRdJB df,aic,jcc --> <!-- 74 Hi Annie https://codepen.io/lhohdalu/pen/QWvdWdY --> <!-- 75 Summer.H https://codepen.io/wan-chine/pen/rNmjNKe --> <!-- 76 群嘉 https://codepen.io/efzdamnp-the-lessful/pen/JjNEojO?editors=1100 --> <!-- 77. stepha https://codepen.io/w1112yb/pen/YzVNPNR --> <!-- 78. Katie Zhao https://codepen.io/katiezhao/pen/wvdgaao --> <!-- 79. Paisley Chien https://codepen.io/canaerkk/pen/VwbPLrv?editors=1100 --> <!-- 80.sarah https://codepen.io/sarah-wang/pen/wvdgMLW --> <!-- 81.shanglin https://codepen.io/rmovuagr-the-selector/pen/GRmroVJ --> <!-- 82. Tracy曼娟 https://codepen.io/tracychien-the-encoder/pen/PomWNPN --> <!-- 83. Oober https://codepen.io/xtsjrjdv/pen/gOWgrPr --> <!-- 84. Carol Li https://codepen.io/carolli834/pen/LYyxNjP --> <!-- 85. 黃小瑄 https://codepen.io/5quvgp2z/pen/RwVKaXV --> <!-- 86. ellie https://codepen.io/hsu-yu/pen/jOmyrxj --> <!-- 87. Alvin Chu https://codepen.io/wave99487chu/pen/VwbPWXM --> <!-- 88. WilsonHan https://codepen.io/wi0821/pen/vYmgZqr --> <!-- 89. Will https://codepen.io/will-liu/pen/MWmJvmb?editors=1100 --> <!-- 90. SihLe Huang code: https://codepen.io/pen/?editors=1100 --> <!-- 91. Freya codepen: https://codepen.io/iyowai/pen/KKmaRog?editors=1100 --> <!-- 92. yellamoon copen:https://codepen.io/pwbzvqja/pen/QWvdxma --> <!--93. Tansy codepan:https://codepen.io/subarashii-huch09/pen/GRmrBjM --> <!-- 94. jameskrauser codepen: https://codepen.io/jameskrauser/pen/KKmaBeL?editors=1100 --> <!-- 95. 鉦勝 codepen: https://codepen.io/atckmax823/pen/KKmaGBo --> <!-- 96. Benson codepen: https://codepen.io/polarBear712/pen/WNjRYGg --> <!-- 97. Erin Huang codepen: https://codepen.io/ErinHuang/pen/LYyxMRQ --> <!-- 98. Jim Hwang codepen: https://codepen.io/jimh1129/pen/yLbgGpa --> <!-- 99. Jocelyn codepen:https://codepen.io/enjoyful/pen/PomWXQr --> <!-- 100. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A)--> <!--101.LTL codepen:https://codepen.io/ltlin93/full/bGWqNQd --> <!--102.Jemma codepen:https://codepen.io/Jemma9/pen/PompZZx --> <!--103.Charles codepen:https://codepen.io/gemini9160/pen/ZEKeQNJ --> <!--104.Larry codepen:https://codepen.io/manpower0708/pen/BaRWzLJ --> <!--105. YOYO codepen:https://codepen.io/lumedkle/pen/zYwZBmv --> <!--106. AKI codepen:https://codepen.io/akichen27/pen/ExmWgqE --> <!--107. 沈依蓉 codepen:https://codepen.io/lily-oa/pen/MWmpbmr --> <!--107. Yurie codepen:https://codepen.io/_u_jung/pen/GRmWrWv --> <!--108. Jamie codepen:https://codepen.io/JamieChenWs/pen/bGWqrpJ --> <!-- 109.Carol LEE https://codepen.io/chiashiunlee/pen/GRmWvXe --> <!-- 110.格可 https://codepen.io/catabo/pen/XWRMeKE --> <!-- 111. Zaii Hsu codepen:https://codepen.io/ivy2846357/pen/NWjpwKw?editors=1100 --> <!-- 112. Calon Codepen: https://codepen.io/Calon0118/pen/qBmrpgY --> <!-- 113. Ruby Chiang Codepen: https://codepen.io/rubyyl0701/pen/gOWmvyL --> <!-- 114.ZOE WU Codepen： https://codepen.io/Zoechiueh/pen/KKmWemq?editors=1100--> <!-- 115.袁祥恩 Codepen： https://codepen.io/ovfxsavp-the-bashful/pen/poPeBrv --> <!-- 116. Tori Codepen： https://codepen.io/hayen/pen/KKmWXGZ?editors=1100 --> <!-- 117. rose Codepen： https://codepen.io/roseling30/pen/KKmmyEb --> <!-- 118. Joe Kuo Codepen： https://codepen.io/alertislow/pen/rNmmpdL?editors=1100 --> <!-- 119.周周 Codepen：https://codepen.io/jhoujhou-the-decoder/pen/xxddzxp --> <!-- 120 axlrock1021 Codepen：https://codepen.io/lnjbmmxo/pen/yLbbEYa --> <!-- 121 Zooey Cheng codepen: https://codepen.io/noraneko0430/pen/oNWWJYW?editors=1100 --> <!-- 122 Ning codepen: https://codepen.io/noraneko0430/pen/oNWWJYW?editors=1100 --> <!-- 123. Blake Hung https://codepen.io/Blakehong/pen/gOWxmJK --> <!-- 124. 三隻小貓 https://codepen.io/bagelover/pen/xxdXGwR --> <!-- 125. 陳品宏 codepen: https://codepen.io/wtka/pen/zYwEEqr --> <!-- 126. Min Chun Tsai codepen: https://codepen.io/Tsai0926/pen/yLbpKRa --> <!-- 127. irene Codepen：https://codepen.io/lohas1107/pen/yLbjemb?editors=1100 --> <!-- 128. WA https://codepen.io/ldddl/pen/KKmeepz --> <!-- 129. Jessie Cheng https://codepen.io/JessieMosbi/pen/JjNZQqY --> <!-- 130. Newman https://codepen.io/newmankz/pen/vYmaXoa --> <!--131. Page https://codepen.io/kanawin821/pen/vYmVqqY --> <!--132. 聿凌 https://codepen.io/igzdflpu/pen/JjNeMdx --> <!--133. twoz https://codepen.io/twoz/pen/xxdomdV --> <!--134. keep https://codepen.io/keep-/pen/OJgXqBg --> <!--135. Pocky https://codepen.io/linlin_web/pen/VwzrMgm?editors=1100 -->