Vertical Align Two Blocks Middle inside main block

I have this html Structure:

First Block

</div>

Second Block

</div>

Third Block

</div>

Lopreum Ipsum Text Two Rows

</div>

Main block has next styles:

.main-block {
width: 20%;
max-width: 180px;
display: inline-block;
height: 135px;
position: relative;
}


How can i vertically center two blocks, one below other?
I can't use method with flex because it will break my inline style.
Also, looks like i can't use position: absolute since i don't know img height and width.

flex

position: absolute

img

Any help?

can you provide your html code?
– Karthi Keyan
2 days ago

"I can't use method with flex because it will break my inline style." - Use inline-flex then.
– Alohci
2 days ago

inline-flex

3 Answers
3

Stacking them vertically, wrapping them into a div and using relative position will do the tricks.

position: relative;
top: 50%;


they set the distance from the top of the wrapper to the outer box to be 50% of the outer box's height.

transform: translateY(-50%);


While this transformation will translate the wrapper up by 50% of the wrapper's height.
The combination of these two leads to the vertical position of the wrapper.

.main-block {
height: 400px;
background: silver;
}
.inner {
position: relative;
top: 50%;
transform: translateY(-50%);
}
p {
white-space: break-word;;
display: block;
width: 50px;
margin: 0;
padding: 0;
}
p:first-child{
background: yellow;
}
p:nth-child(2) {
background: red;
}

12 31 23 as df sd zv

TE XT sdaf asdf asdf

</div>

Add this to the CSS:

Postion: absolute;
Left: 0px;
Top: 0px;
Transform: translate(0vw, -4.5vh);}


Explaination:
This makes the object stuck in the top left corner. And then you move it around with Transform:
The formatting in Transform: can be px,% and vw/vh.

Transform:

Transform:

px,% and vw/vh

Doing this to all of your objects will give you full control of their positions, but make sure that everything is scalable (I recommend using the vh/vw formatting) :-)

vh/vw

EDIT:
Also having the exact same class on each of the <div> will make it hard to position objects, and Transform: :-)

<div>

Transform:

FYI the Transform: translate(0vw, -4.5vh) is copy pasted from my own css, do not use those values :-)
– D3nj1
2 days ago

Transform: translate(0vw, -4.5vh)

I would recommend that you get used to Flexbox, check the complete guide here

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.