css 使潜水器具有全高度,并在其内部对中元件

ffscu2ro  于 2023-01-03  发布在  其他
关注(0)|答案(1)|浏览(68)

所以,我试着做一个"关于我的页面",我在顶部附近有一个标题,在右边有一个正文和一个图片。我的目标是让标题在顶部,正文和图片居中对齐到页面的中间。但很快意识到这将是绝对的,可能会很麻烦。
这样,我至少尝试让一个容器占据剩下的视口(* 因为导航栏和标题占据空间 *),并将元素居中放置在其中。
它看起来是这样的:Div not taking up rest of viewport
下面是HTML:

<h1 id="about-header">// About Me</h1>
  <div id="about-content">
    <img id="pfp" src="/images/profile/KingPr0o7 (1080).jpg">
    <p id="about-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin scelerisque condimentum. Sed porta felis eget libero lacinia interdum. Donec non tellus rutrum, convallis enim sit amet, sollicitudin lacus. Ut cursus elit metus, non suscipit nunc interdum vitae. Aliquam efficitur urna non sem lobortis ullamcorper. Fusce venenatis rutrum quam at posuere. Aenean dui dui, laoreet ac eros eu, cursus tempus lectus. Nullam condimentum nisi non tortor placerat scelerisque. Pellentesque at lectus erat. Donec elit metus, egestas in diam sit amet, mollis posuere diam. Maecenas fringilla finibus purus sed elementum. Nullam neque dui, venenatis sed imperdiet et, cursus sit amet velit. Morbi vulputate cursus vehicula. Suspendisse egestas aliquam sapien, vel finibus massa pharetra in. Donec placerat risus in massa luctus eleifend. Vivamus dignissim lorem eros, vel feugiat arcu faucibus at. <br><br> Phasellus et rutrum ipsum. Sed fermentum eu dolor a semper. Proin vulputate, leo id ultricies scelerisque, felis libero sagittis enim, fringilla iaculis augue neque sed dui. Pellentesque in libero viverra, rhoncus diam et, tincidunt velit. Ut pulvinar dapibus nisi non interdum. Cras feugiat efficitur metus dapibus hendrerit. Phasellus id mauris tincidunt dolor placerat eleifend ut eget lectus. Sed euismod nisl odio, eu placerat elit dignissim sed. Quisque dui dolor, luctus eget posuere in, ultrices eget lectus. Sed interdum lorem arcu, nec dapibus massa imperdiet vel. Integer molestie est diam, ac mattis tortor venenatis nec. Donec vitae tellus magna. Vestibulum maximus bibendum dui ut blandit. Maecenas placerat est enim, nec vestibulum augue vestibulum id. Proin nec viverra sapien, sit amet vestibulum libero. Sed aliquet ante vitae pellentesque elementum. <br><br> In feugiat ipsum quis felis vulputate sodales. Fusce eleifend, ex ac viverra vehicula, justo sem rutrum diam, ut interdum lorem ipsum sed mauris. Phasellus pretium vestibulum arcu eget volutpat. Curabitur justo tortor, posuere vel aliquam eu, tempor quis nisi. Maecenas mauris nulla, dignissim ut erat sagittis, imperdiet bibendum erat. Curabitur vitae sem tortor. Aliquam ac interdum massa. In iaculis volutpat dolor et aliquam. Phasellus volutpat justo id lacus laoreet, at vehicula orci interdum. Nam consectetur faucibus ornare. Fusce rutrum blandit sem malesuada blandit. Maecenas lacinia egestas tellus iaculis vehicula. Mauris dui nulla, suscipit vel interdum a, hendrerit semper dui. <br><br> Nam vitae risus a lectus sagittis suscipit in et nulla. In cursus placerat egestas. In hac habitasse platea dictumst. Aenean tempor efficitur risus non elementum. Ut fermentum semper posuere. Curabitur porttitor nisl felis, non varius purus posuere sed. In hac habitasse platea dictumst. Pellentesque posuere turpis sollicitudin velit iaculis condimentum. Curabitur sed blandit urna, quis maximus elit. <br><br> Vivamus molestie, eros vel cursus efficitur, turpis dolor tristique ipsum, elementum posuere magna odio nec velit. Fusce placerat molestie velit, vitae dictum justo ornare eleifend. Aliquam erat volutpat. Donec at dolor magna. In ante ipsum, malesuada eget convallis eget, fermentum eu ex. Donec nec sollicitudin ligula. Maecenas non tincidunt orci. Donec cursus turpis ligula, quis iaculis tellus tempus sit amet.</p>
  </div>

下面是CSS:

#about-header {
    font-size: clamp(2rem, 2vw, 4rem);
    text-align: center;
    padding: 25px;
    color: #47DA44;
    font-family: 'Rubik', sans-serif;
}

#about-content {
    flex-direction: row-reverse;
    background-color: rebeccapurple;
    display: flex;
    align-items: center;
    justify-content: center;
}

#about-text {
    font-size: clamp(0.6rem, 2vw, 1.2rem);
    margin: 0 25px 0 25px;
    color: white;
    height: 100%;
}

#pfp {
    height: auto;
    max-width: 19vw;
    width: 19vw;
    margin: 0 25px 0 25px;
    border-radius: 50%;
}

期望/需求

一个flex容器占据了剩下的视口,其中的项目/元素居中。当前粘在顶部。

olqngx59

olqngx591#

.container {
  --max-width: 800px;
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
}

#about-header {
  font-size: clamp(2rem, 2vw, 4rem);
  text-align: center;
  padding: 25px;
  color: #47DA44;
  font-family: 'Rubik', sans-serif;
}

#about-content {
  --gap: 1.5rem;
  flex-direction: row-reverse;
  background-color: rebeccapurple;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: justify;
  gap: var(--gap);
  padding: var(--gap);
}

#about-text {
  font-size: clamp(0.6rem, 2vw, 1.2rem);
  color: white;
  height: 100%;
  flex-basis: 70%;
  margin: 0px;
}

#pfp {
  height: auto;
  width: 19vw;
  flex-basis: 30%;
  /* Style for round shape   */
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: fill;
}
<div class="container">
  <h1 id="about-header">// About Me</h1>
  <div id="about-content">
    <img id="pfp" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwBvl0TISm6SGlAL6MHm0rxQ0at-j0LQhc9Q&usqp=CAU">
    <p id="about-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin scelerisque condimentum. Sed porta felis eget libero lacinia interdum. Donec non tellus rutrum, convallis enim sit amet, sollicitudin lacus. Ut cursus elit metus, non suscipit
      nunc interdum vitae. Aliquam efficitur urna non sem lobortis ullamcorper. Fusce venenatis rutrum quam at posuere. Aenean dui dui, laoreet ac eros eu, cursus tempus lectus. Nullam condimentum nisi non tortor placerat scelerisque. Pellentesque at
      lectus erat. Donec elit metus, egestas in diam sit amet, mollis posuere diam. Maecenas fringilla finibus purus sed elementum. Nullam neque dui, venenatis sed imperdiet et, cursus sit amet velit. Morbi vulputate cursus vehicula. Suspendisse egestas
      aliquam sapien, vel finibus massa pharetra in. Donec placerat risus in massa luctus eleifend. Vivamus dignissim lorem eros, vel feugiat arcu faucibus at. <br><br> Phasellus et rutrum ipsum. Sed fermentum eu dolor a semper. Proin vulputate, leo id
      ultricies scelerisque, felis libero sagittis enim, fringilla iaculis augue neque sed dui. Pellentesque in libero viverra, rhoncus diam et, tincidunt velit. Ut pulvinar dapibus nisi non interdum. Cras feugiat efficitur metus dapibus hendrerit. Phasellus
      id mauris tincidunt dolor placerat eleifend ut eget lectus. Sed euismod nisl odio, eu placerat elit dignissim sed. Quisque dui dolor, luctus eget posuere in, ultrices eget lectus. Sed interdum lorem arcu, nec dapibus massa imperdiet vel. Integer
      molestie est diam, ac mattis tortor venenatis nec. Donec vitae tellus magna. Vestibulum maximus bibendum dui ut blandit. Maecenas placerat est enim, nec vestibulum augue vestibulum id. Proin nec viverra sapien, sit amet vestibulum libero. Sed aliquet
      ante vitae pellentesque elementum. <br><br> In feugiat ipsum quis felis vulputate sodales. Fusce eleifend, ex ac viverra vehicula, justo sem rutrum diam, ut interdum lorem ipsum sed mauris. Phasellus pretium vestibulum arcu eget volutpat. Curabitur
      justo tortor, posuere vel aliquam eu, tempor quis nisi. Maecenas mauris nulla, dignissim ut erat sagittis, imperdiet bibendum erat. Curabitur vitae sem tortor. Aliquam ac interdum massa. In iaculis volutpat dolor et aliquam. Phasellus volutpat justo
      id lacus laoreet, at vehicula orci interdum. Nam consectetur faucibus ornare. Fusce rutrum blandit sem malesuada blandit. Maecenas lacinia egestas tellus iaculis vehicula. Mauris dui nulla, suscipit vel interdum a, hendrerit semper dui. <br><br>      Nam vitae risus a lectus sagittis suscipit in et nulla. In cursus placerat egestas. In hac habitasse platea dictumst. Aenean tempor efficitur risus non elementum. Ut fermentum semper posuere. Curabitur porttitor nisl felis, non varius purus posuere
      sed. In hac habitasse platea dictumst. Pellentesque posuere turpis sollicitudin velit iaculis condimentum. Curabitur sed blandit urna, quis maximus elit. <br><br> Vivamus molestie, eros vel cursus efficitur, turpis dolor tristique ipsum, elementum
      posuere magna odio nec velit. Fusce placerat molestie velit, vitae dictum justo ornare eleifend. Aliquam erat volutpat. Donec at dolor magna. In ante ipsum, malesuada eget convallis eget, fermentum eu ex. Donec nec sollicitudin ligula. Maecenas
      non tincidunt orci. Donec cursus turpis ligula, quis iaculis tellus tempus sit amet.</p>
  </div>
</div>

相关问题