I want to understand what are the rules that are applyed to the elements that have the vertical-align css property by which the elements takes the referents for their alignment.
I have been trying all combinations I could imagine, to understand what is the reference that each element take to align itself. In some articles, in almost all I have read, say that the reference is the parent, but as far as I been trying combinations, that is not accurate.
What I did to find the rules by which the elements take de reference for the alignment :
- try all combination:
- elements with this property
- elements wihtout this property
- changing size
- changing the order of elements in the container
After exhausting all combinations, I can't reach a rule/rules by which the elements get they reference for their alignment,
- because:
- that change depending which element is bigger
- that change depending of the order of elements
- that change if some have and other don't this property
So, By myself I can't reach a conclusion of the rules. I have observe that that reference changes depending of the situation. My question is: What are the rules that the element takes in order to chose the reference for its alignment.
I post the code for the context I have used to study this topic. I don't think posting all combinations code will be usefull for helping understand what is my question about.
HTMLS:
<div class="P">
<div class="block-1" style="vertical-align: bottom;"> 1 </div>
<div class="block-2" style="vertical-align: middle;"> 2 </div>
<div class="block-3" style=""> 3 </div>
<div class="block-4" style="vertical-align: middle;"> 4 </div>
</div>
CSS:
.P { height:400px; width:80%; border:5px rgb(224, 167, 11) solid; }
.block-1 { height:250px; width:75px; border:5px rgb(234, 238, 13) solid }
.block-2 { height:65px; width:30%; border:5px rgb(48, 175, 16) solid }
.block-3 { height:275px; width:50px; border:5px rgb(43, 126, 17) solid }
.block-4 { height:25px;width:18px;border:black 5px solid; }
.P div { display: inline-block; }
