如何更改圖像 position

Question

我需要一些幫助，我目前正在嘗試按照我正在觀看的教程使用 HTML 制作投資組合。 我使用 undraw 添加圖像但不幸的是，圖像卡在右側SVG 圖像卡在右側

我想把圖像放在我的圖標下面，但不知道該怎么做，我的 CSS 代碼如下所示：

 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap'); *{ color:black; font-family: 'Lato', sans-serif; padding: 0; margin: 0; box-sizing: border-box; } h1,h2,h3,h4,h5,h6,span{ color:black; text-align: center; line-height: 1.25; } h1{ font-size: 36px; } p{ line-height: 1.5; font-size: 16px; } li{ list-style-type: none; }.flex{ display: flex; /* this automatically aligns like columns or rows with auto width and auto height */ }.flex-1{ flex: 1; /* this makes sure that it is the entire height of the page */ } /* Navigation bar */.row{ width: 100%; max-width: 800px; margin: 0 auto; }.text-pink{ color: #FF69B4; } nav{ height: 100px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }.nav__link--list{ display: flex; }.nav__link--anchor{ margin: 0 12px; color: black; text-decoration: none; font-weight: 700; }.nav__link--anchor-primary{ background-color: #FF69B4; padding: 8px 20px; border-radius: 50px; color: white; transition: all 300ms ease; }.nav__link--anchor-primary:hover{ background-color: #FF69B4; }.personal_logo{ font-size: 20px; color: #FF69B4; margin: 0 12px; font-weight: bold; } /* About mE */ #about-me{ min-height: 100vh; /* entire height of the page */ display: flex; flex-direction: column; }.about-me__info{ display: flex; flex-direction: column; }.about-me__info--container { display: flex; flex-direction: column; /* so it is not side-by-side */ align-items: center; max-width: 600px; margin: 0 auto; text-align: center; }.about-me--picture--mask{ width: 180px; height: 180px; border-radius: 100%; overflow: hidden; box-shadow: 0 8px 16px rgba(0,0,0,1); margin-bottom: 20px; }.about-me__picture{ width: 100%; transform: scale(1,1.1); padding-top: 7px; }.about-me__info--para{ font-size: 15px; margin-bottom: 28px; }.about-me__info--title{ margin-bottom: 15px; }.about-me__link{ font-size: 20px; color:#FF69B4; text-decoration: none; padding: 0 16px; }.about-me__img--container{ flex: 1; display: flex; align-items: center; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Annette</title> <link rel="stylesheet" href="./css/styles:css"> <script src="https.//kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script> </head> <body> <section id="about-me"> <nav> <div class="personal_logo">Annette</div> <ul class="nav__link--list"> <li class="nav__Link"> <a href="#languages" class=" nav__link--anchor link__hover-effect link_hover-effect--black" >Languages</a> </li> <li class="nav__link"> <a href="#projects" class=" nav__link--anchor link__hover-effect link_hover-effect--black"> Projects</a> </li> <li class="nav__link"> <a href="" class= "nav__link--anchor nav__link--anchor-primary" >Contact</a> </li> </ul> </nav> <div class="flex flex-1"> <div class=",about-me__info row"> <:--inside the row. there is 2 sections. infromation and image--> <div class="about-me__info--container"> <figure class="about-me--picture--mask"> <img src=",/images/Annette2.JPG" class= "about-me__picture" alt="Picture of Me,"> </figure> <.--this contains my image --> <h1 class="about-me__info--title"> Hey. I'm <span class="text-pink">Jane Doe </span> </h1> <h1> <p class="about-me__info--para"> I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees. I have always been interested in creating very engaging and interactive PowerPoints to present my work. This led to my passion for web development and designing projects on topics that I'm interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong> </p> <div class="about-me__links"></div> <a href="" class="about-me__link"> <i class="fa-brands fa-linkedin"></i> </a> <a href="" class="about-me__link"> <i class="fa-brands fa-github"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-inbox"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-file-pdf"></i> </a> </div> </div> <figure class="about-me__img--container"> <img src="./Assests/undraw_proud_coder_re_exuy.svg" alt=""> </figure> </div> </section> </body> </html>

關於如何在我的圖標下方的中心獲取 SVG 圖像的任何建議？ 謝謝！

Answer 1

只需要一點點來修復標記。 並將圖像放在它自己的 div 中，在 flex 的下方。

 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Poppins:wght@400;500;600&display=swap'); * { color: black; font-family: 'Lato', sans-serif; padding: 0; margin: 0; box-sizing: border-box; } h1, h2, h3, h4, h5, h6, span { color: black; text-align: center; line-height: 1.25; } h1 { font-size: 36px; } p { line-height: 1.5; font-size: 16px; } li { list-style-type: none; }.flex { display: flex; /* this automatically aligns like columns or rows with auto width and auto height */ }.flex-1 { flex: 1; /* this makes sure that it is the entire height of the page */ } /* Navigation bar */.row { width: 100%; max-width: 800px; margin: 0 auto; }.text-pink { color: #FF69B4; } nav { height: 100px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }.nav__link--list { display: flex; }.nav__link--anchor { margin: 0 12px; color: black; text-decoration: none; font-weight: 700; }.nav__link--anchor-primary { background-color: #FF69B4; padding: 8px 20px; border-radius: 50px; color: white; transition: all 300ms ease; }.nav__link--anchor-primary:hover { background-color: #FF69B4; }.personal_logo { font-size: 20px; color: #FF69B4; margin: 0 12px; font-weight: bold; } /* About mE */ #about-me { min-height: 100vh; /* entire height of the page */ display: flex; flex-direction: column; }.about-me__info { display: flex; flex-direction: column; }.about-me__info--container { display: flex; flex-direction: column; /* so it is not side-by-side */ align-items: center; max-width: 600px; margin: 0 auto; text-align: center; }.about-me--picture--mask { width: 180px; height: 180px; border-radius: 100%; overflow: hidden; box-shadow: 0 8px 16px rgba(0, 0, 0, 1); margin-bottom: 20px; }.about-me__picture { width: 100%; transform: scale(1, 1.1); padding-top: 7px; }.about-me__info--para { font-size: 15px; margin-bottom: 28px; }.about-me__info--title { margin-bottom: 15px; }.about-me__link { font-size: 20px; color: #FF69B4; text-decoration: none; padding: 0 16px; }.about-me__img--container { flex: 1; display: flex; align-items: center; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Annette</title> <link rel="stylesheet" href="./css/styles:css"> <script src="https.//kit.fontawesome.com/6ad8c9aa3b.js" crossorigin="anonymous"></script> </head> <body> <section id="about-me"> <nav> <div class="personal_logo">Annette</div> <ul class="nav__link--list"> <li class="nav__Link"> <a href="#languages" class=" nav__link--anchor link__hover-effect link_hover-effect--black">Languages</a> </li> <li class="nav__link"> <a href="#projects" class=" nav__link--anchor link__hover-effect link_hover-effect--black"> Projects</a> </li> <li class="nav__link"> <a href="" class="nav__link--anchor nav__link--anchor-primary">Contact</a> </li> </ul> </nav> <div class="flex flex-1"> <div class=",about-me__info row"> <:--inside the row. there is 2 sections. infromation and image--> <div class="about-me__info--container"> <figure class="about-me--picture--mask"> <img src=",/images/Annette2.JPG" class="about-me__picture" alt="Picture of Me,"> </figure> <.--this contains my image --> <h1 class="about-me__info--title"> Hey: I'm <span class="text-pink">Jane Doe </span> </h1> <p class="about-me__info--para"> I recently just completed my <strong class="text-pink">insert text </strong> Throughout both degrees. I have always been interested in creating very engaging and interactive PowerPoints to present my work: This led to my passion for web development and designing projects on topics that I'm interested in such as <strong class="text-pink">Ethical AI, Social Justice and Emerging Technologies. </strong> </p> <div class="about-me__links"> <a href="" class="about-me__link"> <i class="fa-brands fa-linkedin"></i> </a> <a href="" class="about-me__link"> <i class="fa-brands fa-github"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-inbox"></i> </a> <a href="" class="about-me__link"> <i class="fa-solid fa-file-pdf"></i> </a> </div> </div> </div> </div> <div> <figure class="about-me__img--container" > <img src="https://picsum.photos/200" alt="" style="margin: auto"> </figure> </div> </section> </body> </html>