Properties of vertical-align?




 the <title>Property vertical-align.</title>
<style>
#container{
 width: 400px;
 height: 100px;
 border: 1px solid black;
 padding: 2px; /* Set the inner indentation */
 margin: 0 auto; /* Rasmussen block center */
}
#container:before{
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 content: "";
 text-align: center;
}
p{
 line-height: 50px;
 font-size: 30px;
}

span{
 display: inline-block;
 vertical-align: bottom;
 font-size: 10px;
}
</style>



<p>asdasdasdasdasdasdasd<span>Ressfsdfsdf</span>asdasdasd</p>




Tell me why a string span does not fall to the bottom of the line . Which has a line height of 50px. Overcame the video on YouTube is there such a thing works.
I get so
IV3uUd0OQWaZyjGGYiMq5g.png
June 10th 19 at 15:11
3 answers
June 10th 19 at 15:13
June 10th 19 at 15:15
have < p > line-height get
What then is different from the bottom text-bottom? - Harrison_McLaughl commented on June 10th 19 at 15:18
https://jsfiddle.net/daft82m5/ - Harrison_McLaughl commented on June 10th 19 at 15:21
bottom
Aligns bottom of element and its descendants with the bottom of the entire row

Well I prescribe at p line-height: 50px; And I understand it must fall below. But I wrote get line-height: 50px; Maybe I do not understand? - Harrison_McLaughl commented on June 10th 19 at 15:24
June 10th 19 at 15:17
#container{
 width: 400px;
 height: 100px;
 border: 1px solid black;
 padding: 2px; /* Set the inner indentation */
 margin: 0 auto; /* Rasmussen block center */
}
#container:before{
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 content: "";
 text-align: center;
}
p{
 font-size: 30px;
}

span{
 display: inline-block;
 vertical-align: bottom;
 font-size: 10px;
 }


https://jsfiddle.net/mc0p5uh7/
I don't understand then is different from than bottom text-bottom? - Harrison_McLaughl commented on June 10th 19 at 15:20
, in any reference written than. - Harrison_McLaughl commented on June 10th 19 at 15:23
bottom
Aligns bottom of element and its descendants with the bottom of the entire row

Well I prescribe at p line-height: 50px; And I understand it must fall below. But I wrote get line-height: 50px; Maybe I do not understand? - Harrison_McLaughl commented on June 10th 19 at 15:26
You helped my response? Gratitude is good, if you check his decision on this issue. - Harrison_McLaughl commented on June 10th 19 at 15:29

Find more questions by tags CSS