Why it isn't this div centered? I can't understand - html

Question

<div style="border-radius:50px 10px;width:60%;border: 1px solid #123467;background:linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);display:inline-block;float:right">
<div style="align:center;border-radius:10px 50px;margin-top:5%;text-align:center;width:60%;border: 1px solid #ffffff;background:linear-gradient(-225deg,#A445B2 0%, #D41872 52%, #FF0066 100%)">
<br/>
<h3 style="color:black">Running from</h3>
</div>
<br/>
</div>
The blue, pink, violet div isn't center despite I insert the align tag also in style (CSS). Why?
Thanks
Andrea

Answer 1

Your float: right is the main problem which forces the outer DIV to the right side. Remove that. To horizontally center it, you can make it a block element and add auto for margin-right and left.
So, you should apply display:block; margin: 0 auto; to both DIVs and remove the float (actually, to keep your 5% margin-top, the margin setting for the inner DIV has to be margin: 5% auto 0;)
<div style="border-radius:50px 10px;width:60%;border: 1px solid #123467;background:linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);display:block;margin: 0 auto;">
<div style="align:center;border-radius:10px 50px;text-align:center;width:60%;border: 1px solid #ffffff;display:block;margin: 5% auto 0;background:linear-gradient(-225deg,#A445B2 0%, #D41872 52%, #FF0066 100%)">
<br/>
<h3 style="color:black">Running from</h3>
</div>
<br/>
</div>

Answer 2

There is no such CSS property "align". Instead, use the margin property and set its values to 0 (for top and bottom), as well as auto (for left and right). This will center the element.
.outer {
border-radius: 50px 10px;
width: 60%;
border: 1px solid #123467;
background: linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);
display: inline-block;
float: right;
}
.inner {
margin: 0 auto;
border-radius: 10px 50px;
margin-top: 5%;
text-align: center;
width: 60%;
border: 1px solid #ffffff;
background: linear-gradient(-225deg,#A445B2 0%, #D41872 52%, #FF0066 100%);
}
<div class="outer">
<div class="inner">
<br/>
<h3 style="color:black">Running from</h3>
</div>
<br/>
</div>

Answer 3

you could add margin: 5% auto; to your inner DIV:
<style>
#firstDiv
{
border-radius:50px 10px;
width:60%;
border: 1px solid #123467;
background:linear-gradient(to top, #88D3CE 0%, #6E45e2 100%);
display:inline-block;
float:right;
}
#secondDiv {
border-radius:10px 50px;
margin: 5% auto;
width:60%;
border: 1px solid #ffffff;
background:linear-gradient(-225deg,#A445B2 0%, #D41872 52%, #FF0066 100%);
text-align: center;
}
#secondDiv h3 {
color: black;
}
</style>
<div id="firstDiv" style="">
<div id="secondDiv" style="">
<h3>Running from</h3>
</div>
</div>
However I suggest separating styles and html.