Question

我无法使用em将自定义单选按钮“tick”置于其父级中心。

使用px可以很好地工作，但是em无法在某些尺寸上均匀居中。它将内容错放了几个像素，有时它看起来很随机。例如，如果我重新加载页面而不更改样式中的任何内容，有时可能会正确呈现它，有时则会错误地呈现。

下面是一个演示该问题的小提琴。（切换ems /像素并更改大小以查看问题）

<body>

    <div id="parent">
        <div id="child"></div>
    </div>
    <input type="button" id="toggle" value="toggle em vs px"/>
    <input type="button" id="bigger" value="increace size"/>
    <input type="button" id="smaller" value="decrease size"/>
</body>

body {
    font-size: 10px;
}
#parent {
    width: 32px;
    height: 32px;    
    border: 2px solid rgb(37, 177, 172);
    border-radius: 20px;
    background: white;
    margin: 20px;
}
#child {
    width: 24px;
    height: 24px;
    margin: 4px;
    background: rgb(37, 177, 172);
    border-radius: 10px;
}

#parent.em {
    width: 3em;
    height: 3em;    
    border: 2px solid rgb(37, 177, 172);
    background: white;
    margin: 20px;
    border-radius: 2em;
}
#parent.em #child {
    width: 2em;
    height: 2em;
    margin: 0.46em;
    background: rgb(37, 177, 172);
    border-radius: 2em;
}

var size = 10;

$(document).ready(function() {
    $("input#toggle").click(function() {
        $("#parent").toggleClass("em");
    });
     $("input#bigger").click(function() {
         size++;
         $("body").css("font-size", size);
    });
     $("input#smaller").click(function() {
        if ( size > 1 ) {size--;}
        $("body").css("font-size", size);
    });
});

我有什么办法可以继续使用em并确保它始终均匀显示。

Answer 1

如果你在我的快速测试中保持相同的圆圈比例，那么你的例子似乎很好。例如，使用您的基本尺寸更改.46em to .4em，2em to 2.4em，3em to 3.4em，它与24px和34px相同。请记住，因为你不能有像素的分数，所以ems会变圆。

在这里小提琴：http://jsfiddle.net/1k35tfgL/2/

使用em统一中心内容

1 个答案: