Salve a tutti.
Sto cercando di studia un po' di soluzioni per centrare gli elementi, ma non riesco minimamente nella cosa.
Questo è la situazione HTML:
<div class="vc_row2">
<div class="vc_column">
<div class="pulsante"></div>
</div>
<div class="vc_column">
<div class="allSides"></div>
</div>
<div class="vc_column">
<div class="circle"></div>
</div>
<div class="vc_column">
<div class="circlePulse"></div>
</div>
</div>
Questi, invece, i CSS (semplificati, perché tralascio animazioni e quant'altro sto provando):
.vc_row2 {
width: 100vw;
height: 30vh;
vertical-align: middle;
}
.vc_column{
width: 24%;
height: 30vh;
padding: 5vh 0;
display: inline-block;
position: relative;
vertical-align: middle;
line-height: 30vh;
}
.pulsante{
margin: 0 auto;
display: block;
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
}
.allSides{
margin: auto;
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
border-radius:50%;
}
.circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
width: 30px;
height: 30px;
}
.circlePulse {
width: 32px;
height: 32px;
background: #34FF4A;
border-radius: 50%;
position: relative;
}
L'unico elemento che si centra nei DIV con classe vc_column è ovviamente quello con classe circle (posizione assoluta, e spostamento, va da sé).
Ma, gli altri? Ho provato in tanti modi, evitando l'opzione flex che certo è più facile. Qualcuno sa spiegarmi il perché?