I am developing one page by using html and css only, my requirement is i want to move the content to the center from the left and i want to give some margin-top but it's not reflecting ,please help me to acheive this thing

<hr>
<i class="footer"> Thanks for visiting</i>
<style>
 .btm-content{
   height: 150px;
   width:100%;
 color: black;
 opacity: 1;
 font-size: larger;
text-align:center;
margin-top:20px;
}
</style>

CodePudding user response：

You can use flex to align your content on any side of the container it is in. The code below shows the some of the different ways you can style with flexbox.

body{
display:flex;
flex-wrap:wrap;
}

div{
width:100px;
height:100px;
margin:10px;
background:#dadada;
display:flex;
}

div:nth-of-type(1){
justify-content:center;
align-items:center;
}

div:nth-of-type(2){
justify-content:flex-start;
align-items:center;
}

div:nth-of-type(3){
justify-content:flex-end;
align-items:center;
}

div:nth-of-type(4){
justify-content:center;
align-items:flex-start;
}

div:nth-of-type(5){
justify-content:center;
align-items:flex-end;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

By default the i tag is in inline so...

 .footer { display:  block; text-align: center }