时间戳

首页 > 解决方案 > HTML/css Flex 居中 div

html - HTML/css Flex 居中 div

问题描述

我正在尝试模仿一个网站。我正在为我的 div 使用 flex，但它们没有正确对齐。

我的样子：https ://i.imgur.com/4k5ln1T.png

我希望它看起来像什么：https ://i.imgur.com/Wl6DY1t.png

我的代码：

 <div class="div1">
    <img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
    <p class=""> cookies are great! </p>
    <a class="modulbutton" href="#open1">Open modal link</a>

    <div class="div1">
      <img src="https://i.imgur.com/kdOyxwV.png" class="image" alt="icecream picture">
      <p class=""> Ice cream is great! </p>
      <a class="modulbutton" href="#open1">Open modal link</a>


  <div id="open1" class="modalwindow">
     <div class="msgblock">
          <h1>Heading</h1>
          <p>some text</p>
           <img src="2.jpg" alt="missing">
          <div class="">  <a href="#">Close</a></div>


     </div>
  </div>
  </body>
  <footer>
    <style>

    .div1 {
      width: 900px;
      height: 400px;
      border: 3px solid blue;
      display: flex;
      align-items: center;
    }

.modulbutton{
  background-color: green;
  color: white;
  padding: 3%;
  text-decoration: none;
}

任何帮助将不胜感激，我似乎无法在图像底部正确对齐描述文本和模式按钮。

谢谢！

标签： htmlcssflexbox

解决方案

您需要做的是将 p 标签和标签放在 div1 下的 div 中，然后在 div 1 的 css 中使用 flex 方向

<div class="div1">
        <img src="https://i.imgur.com/AbZMoEL.png" class="image" alt="cookie picture">
    <div> <p class="indent"> cookies are great! </p>
        <a class="modulbutton" href="#open1">Open modal link</a>
    </div>
    </div>


 .div1 {
    width: 900px;
    height: 400px;
    border: 3px solid blue;
    margin: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

推荐阅读