如何更改图像 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>