更改屏幕大小时，文本和按钮会移位

Question

当我更改浏览器窗口大小时，进度圆中心的文本偏离其实际位置并且按钮也会改变其正常位置（位于主容器的中心位置），如下所示：< / p>

从圆心移位的文字60也按钮被推到最初位于中心的左侧，即使我更改浏览器窗口大小，我怎样才能将它们保留到原始位置，这里是css我申请了

＆＃13;

＆＃13;

body{
margin: 0;
padding: 0;
}

.button1 {
float: right;
background-color: red;
width: 50%;
margin-right: 188px !important;
}
.main_container{
width: 80%;
margin: 0 auto;
height: 94%;
}

.card_styling{
background-color: lightgrey;
margin-top: 36px;
padding-top: 119px;
min-height: 63%;
}
.circle{
height: 16%;
float: right;
margin-top: -13%;
}
#time{
float: right;
margin-top: -10%;
margin-right: 5%;
font-weight: bold;
}
.title_styling{
margin-top: -87px;
margin-bottom: 97px; 
}
.content_style{
margin-bottom: 32px;
}

＆＃13;

<div class="card-container" class="main_container">

<md-card class="card_styling">
<md-progress-circle class="circle" mode="determinate" 
[value]="rangeObs |   async ">   
</md-progress-circle>
<p id="time">{{percentage}}</p>

<md-card-title class="title_styling">Introduction to computer
</md-card-title>
  <md-card-content>
    <p class="content_style">some text</p>
<div *ngFor="let d of data">
       <md-radio-button>
           {{d.label}}
       </md-radio-button>
</div>

<md-card-actions>
    <button md-button class="button1">Submit</button>
</md-card-actions>

</md-card-content>
</md-card>
</div>`

＆＃13;

＆＃13;

＆＃13;

Answer 1

1.）将圆圈和数字60分成一组

2.。）将提交按钮放在greybox div

中

为了使它们保持静止，你必须将它们组合在一起