Css Text Vertical Align Center Code Example


Example 1: css center image


.center {
display: block;
margin-left: auto;
margin-right: auto;
}

Example 2: css align center


//HTML
<div class="parent">
<span>Hello World</span>
</div>

//CSS
.parent {
display: flex;
justify-content: center;
align-items: center;
}

Example 3: 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 4: text vertical align css


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style type="text/css">
div {
display: table-cell;
width: 250px;
height: 200px;
vertical-align: middle;
}
</style>
</head>
<body>
<div>Vertically aligned text</div>
</body>
</html>

Example 5: css center text in div vertically


<!DOCTYPE html>
<html>
<head>
...
<style type="text/css">
div{
width: 200px;
height: 200px;
border: solid green;
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div>Vertikal ausgerichteter Text</div>
</body>
</html>

Example 6: 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%;
}

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools