Question

我试图将“ Travel Blog; View Project”的图片居中，因此文本在图片的左侧。不重叠

我尝试使用flexbox网格，但是我不知道现在该怎么做

html

src/test/java

css

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Fabian Gmeindl</title>
    <link rel="stylesheet" type="text/css" href="css/master.css">
  </head>
  <body>
    <header id="showcase">
      <div class="Top-Page">

      <h1>HEY,</h1>
      <h2>I'm Fabian Gmeindl</h2>
      <p>Skier, Writer, Entrepreneur</p>

      </div>
    </header>
      <div id="project-home">



      <!-- Top Page -->

      <!-- Page Projects -->
      <div class="rtro-area" class="wrapper">




        <h2>Travel Blog</h2>
        <a href="https://www.rtrobrand.com">View Project</a>
        </div>
        <img  class="img-rtro" class="wrapper" src="Resources/rtro-toppage.png" alt="Rtro Blog Top Page">


        <footer id="main footer">
          <p>Copyright &copy; 2019 Fabian Gmeindl</p>
        </footer>

      </div>
  </body>
</html>

当我向下滚动到问题所在的第二部分时，它看起来像这样 https://imgur.com/mt2HStK

Answer 1

如果将 align-items：center 添加到flexcontainer的CSS中，则可以对齐“旅行博客；查看项目”部分。（ align-items -控制横轴上所有项目的对齐。）您必须以横轴为中心，就像使用“ flex-direction：column”一样。

一般来说，要使元素与flexbox对齐，我可以推荐这篇文章：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

如何使用flexbox正确居中文本和图像？

1 个答案: