Flexbox align div in center [duplicate]
Multi tool use
Flexbox align div in center [duplicate]
This question already has an answer here:
I'm using flex and I want to align the div filho in the center of div pai, I try use justify-content: center, but don't work because there insn't space left, and I can't set a with to each div.
div filho
div pai
justify-content: center
.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>
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
