Мне нужно, чтобы «flex-container> div4» перекрывался по вертикали и / или выравнивался по горизонтали с «flex-container> div2».
Нужно, чтобы div2 и div4 были идеально отцентрированы.
Я использовал выравнивание текста по центру div2, но div4 - это изображение.
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: blue;
}
.flex-container > div {
background-color: #ffffff;
margin-top: auto;
margin-right: auto;
flex-shrink: 0;
height: 35px;
min-width: 150px;
max-width: 150px;
text-align: left;
line-height: 50px;
font-size: 30px;
}
.flex-container > div2 {
background-color: #ffffff;
flex-shrink: 0;
margin-top: auto;
height: 50px;
width: 250px;
text-align: center;
line-height: 50px;
font-size: 12px;
}
.flex-container > div3 {
margin-top: auto;
margin-left: auto;
width: 150px;
height: 35px;
text-align: center;
line-height: 50px;
font-size: 15px;
position: -webkit-sticky;
position: sticky;
top: 0;
align-self: flex-start;
background-color: white;
}
.flex-container > divspacer {
background-color: #ffffff;
width: 33%;
height: 35px;
margin: 1px;
text-align: center;
line-height: 50px;
font-size: 12px;
}
.flex-container > div4 {
margin-left: auto;
background-color: #ffffff;
text-align: center;
}
<div class="flex-container">
<div><img src="https://oakandrocks.com/wp-content/uploads/2019/04/perfootersmol.png"></div>
<div2>
<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/onr"> Webmasters |</a>
<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/terms"> Terms & Conditions | </a>
<a class="inline" style="text-decoration: none" href="https://oakandrocks.com/privacy"> Privacy Policy </a>
</div2>
<div3><a style="text-decoration: none" href="https://oakandrocks.com/">© 2019 Oak & Rocks</a></div3>
</div>
<div class="flex-container"><div4><img src="https://oakandrocks.com/wp-content/uploads/2019/04/footertxt.png"></div4></div>
Итак, в заключение, возможно, нет перекрытия, но мне нужно, чтобы div4 (png solutions для веб-сайта) был идеально отцентрирован и в нижней части страницы (может быть ~ 1px вертикальное поле)
ИСПРАВЛЕНО:
.flexcontainer > div4 {
display: block;
margin-left: auto;
margin-right: auto;
}