vertical text center code example
Example 1: css align center
//HTML
<div class="parent">
<span>Hello World</span>
</div>
//CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Example 2: css align text vertically
/* HTML: */
<div class="text">
lorem ipsum
</div>
/* CSS: */
.text {
vertical-align: middle;
/*can take any value of:
baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> */
}
Example 3: how to make the text vertically centered in css
/*attention, i used this code because i had to center a div with text in another div without text*/
div{
position: relative;
top: 25%;
bottom: 25%;
}
Example 4: css center div
<div class="parent">
<div class="child">
<p>
Eh Up Me Duck!
</p>
</div>
</div>
<style>
.parent {
border: 1px solid black;
padding: 2px;
}
.child {
border: 1px solid red;
width: 50%;
margin-left: auto;
margin-right: auto;
}
p {
text-align: center;
}
</style>