我正在尝试使用CSS绝对定位将这个圆圈置于空白页面上,但由于某种原因它已关闭,因为我的较大圆圈内的小点的居中位置。
任何建议或澄清都会很棒!
以下是我的代码:
HTML:
<html>
<body>
<div id="circle">
<div id="center"></div>
</div>
</body>
</html>
CSS:
#circle {
width: 300px;
height: 300px;
background: black;
border-radius: 50%;
border-width: 10%;
border-color: tan;
border-style: solid;
position: absolute;
left: 50%;
top: 50%;
}
#center {
width: 10px;
height: 10px;
border-radius: 5px;
background: black;
position: absolute;
top: 50%;
left: 50%;
}
答案 0 :(得分:0)
我想我可能已经自己回答了!
div是偏离中心的,因为我使用百分比来缩放它们的位置。结果,它们的固定尺寸会使百分比设定的位置偏离。
E.g。是圆的固定大小是0,它将是中心。
一切顺利!
答案 1 :(得分:0)
要垂直和水平居中,请添加以下css:
public class coin extends AppCompatActivity {
private volatile long coinsNumber=0;
private volatile long income;
private volatile long coinsPerClick;
private volatile int packOfCiggarreteNumber;
private volatile int item2Number;
private volatile int item3Number;
private volatile int item4Number;
private volatile int item5Number;
private volatile int item6Number;
private volatile int item7Number;
private volatile int item8Number;
private volatile int item9Number;
private volatile int item10Number;
private volatile int packOfCiggarretePrice;
private volatile int item2Price;
private volatile int item3Price;
private volatile int item4Price;
private volatile int item5Price;
private volatile int item6Price;
private volatile int item7Price;
private volatile int item8Price;
private volatile int item9Price;
private volatile int item10Price;
public coin (long coinsNumber1, long income1,long coinsPerClick1,int packOfCigarreteNumber1,int item2Number1,
int item3Number1,int item4Number1,int item5Number1,int item6Number1,int item7Number1,int item8Number1,
int item9Number1,int item10Number1,int packOfCiggarretePrice1,int item2Price1,int item3Price1,
int item4Price1,int item5Price1,int item6Price1,int item7Price1,int item8Price1,int item9Price1,int item10Price1)
{
coinsNumber = coinsNumber1;
income=income1;
coinsPerClick=coinsPerClick1;
packOfCiggarreteNumber=packOfCigarreteNumber1;
item2Number=item2Number1;
item3Number=item3Number1;
item4Number=item4Number1;
item5Number=item5Number1;
item6Number=item6Number1;
item7Number=item7Number1;
item8Number=item8Number1;
item9Number=item9Number1;
item10Number=item10Number1;
packOfCiggarretePrice=packOfCiggarretePrice1;
item2Price=item2Price1;
item3Price=item3Price1;
item4Price=item4Price1;
item5Price=item5Price1;
item6Price=item6Price1;
item7Price=item7Price1;
item8Price=item8Price1;
item9Price=item9Price1;
item10Price=item10Price1;
}
问题出现了,因为即使您指定了margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
,它也会从div的最左边开始计算...所以圈子的最左边。这意味着您的圆圈将偏向右侧。
(在IE8以上工作......万一你想知道。)