2016-11-30 100 views
0

當我更改瀏覽器窗口大小時,居中放置在遠離其實際位置的進度圈中的文本和按鈕也改變其正常位置(位於中心在主容器)是這樣的:當改變瀏覽器窗口大小時,文本和按鈕在改變屏幕大小時發生位移

enter image description here

從圓心移動文本60還按鈕被推到了左側,這是最初在中心,我怎麼能留住他們到原來的位置,即使我改變瀏覽器窗口大小,這裏是css我申請了

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; 
 
}
<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>`

回答

0

1)股利圓和在一組

2.)一起數60把提交按鈕的greybox DIV

內部爲了接站靜態你必須將它們組合在一起

相關問題