Css For Middle Alignment 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: how to center div


<!--center text-->
<!--padding deals with margins within the element itself-->
<!--margin deals with blank space surrounding and element-->
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 80%;
border: 3px solid #73AD21;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>

</body>
</html>

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 How Can I Convert A String To A Editable