Question

我正在使用flex，我想将div filho对准div pai的中心，我尝试使用justify-content: center，但由于剩余空间不足而无法使用，而我无法为每个div设置with。

.pai {
    display: block;
    background-color: #f3f5fd;
    margin: 0 15px 15px;
}

.filho {
    padding: 10px 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.item1 {
    min-width: 210px;
}

.item2 {
    height: 100%;
    display: flex;
    align-items: center;
    flex: 2;
}

.item2 img {
    max-height: 100%;
    width: 100%;
}

.item3 {
    display: flex;
    align-content: center;
}

<html>
<head>
    <title>teste</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="pai">
  <div class="filho">
    <div class="item1">
      <div class="offer-info-box">
        <h3 class="title-offer">test 2018</h3> <span class="subtitle-offer">1.0 testes test XX</span>
        <div class="offer-tag-wrapper" style="display: none;">
          <div class="offer-tag mobile-hidden"><span>PESSOA FÍSICA</span></div>
        </div>
        <div><img src="" alt="test image"></div>
        <div><span >À preco a partir de </span> <span class="price-text-big">R$ 90.000,00</span></div>
        <div><span>1ª teste gratis</span></div>
      </div>
    </div>
    <div class="item2">
      <img src="http://serviciortiz.com/images/600x300.gif" />
    </div>
    <div class="item3">
            <ul><li>teste teste3</li><li>teste testegrande</li><li>tes testeste</li></ul></div>
    </div>
  </div>
</div>
</body>
</html>

Flexbox将div在另一个div的中心对齐，未定义widht

0 个答案: