html - 无法让非常小的 div 居中

Question

示例:http://jsfiddle.net/nDWRm/4/

我想使用 css 或 text 或 svg 制作一个加号和减号按钮。

我尝试使用 css 并使用文本 + 和 - 符号，但发现那些 never 行向上。问题是我可以让它在 100% 缩放时看起来相当不错，但是当缩放更改时 left 和 top 值也需要更改以使 div 再次居中.我还没有尝试过 svg。我只是想知道为什么这似乎不可能。

CSS

#container{
    height: 1.5em;
    width: 1.5em;
    border-radius: 5px;
    border: 0.1em solid black;
    cursor: pointer;    
}

.vert{
    top: 0.25em;
    left: 0.65em;
    position:absolute;
    width: 0.3em;
    height: 1.1em;
    background-color: #424A49;
    display: block;
}

.horz{
    top: 0.65em;
    left: 0.25em;
    position:absolute;
    width: 1.1em;
    height: 0.3em;
    background-color: #424A49;
    display: block;
}

html

<div id="container">
  <div class="vert"></div>
  <div class="horz"></div>
</div>​

我使用单字字体制作了这个 fiddle :

http://jsfiddle.net/nDWRm/17/

如果您将 #container2 的字体大小更改为例如 5em，您将看到它无法正确呈现。从美学 Angular 看，+ 符号有圆 Angular 而 - 没有，这不是很令人愉快:P。

这个 fiddle 非常清楚地显示了字体问题:http://jsfiddle.net/nDWRm/25/

Answer 1

您不能只使用随机 EM 值。您必须计算它们以便浏览器将其转换为圆形像素值:

http://jsfiddle.net/meo/p7WMW/

(当然你可以不使用 scss，例如使用 http://pxtoem.com/)

在 js fiddle 上，基本字体大小为 16px。所以你需要它来计算你的 EM 值。

scss

$base-font-size: 16px;

@function px2em($px, $contextPXSize : $base-font-size ){
    @return ( $px / $contextPXSize ) * 1em;
}

a {
    position: relative;
    display: block;
    margin: 2em;
    width: px2em(40px); height: px2em(40px);
    background: rgba(0,0,0,.1);
    outline: 1px solid #000;
    &:after, &:before {
        content: "";
        position: absolute;
        background: black;
        left: 50%; top: 50%;   
    }
    &:after {
        height: px2em(30px); width: px2em(4px);
        margin: px2em(-15px) 0 0 px2em(-2px);        
    }
    &:before {
        height: px2em(4px); width: px2em(30px);
        margin: px2em(-2px) 0 0 px2em(-15px); 
    }
    &:hover:after {
        display: none;        
    }
}

什么会导致:

CSS

a{
   position:relative;
   display:block;
   margin:2em;
   width:2.5em; height:2.5em;
   background:rgba(0, 0, 0, .1);
   outline:1px solid #000
}
a:after,a:before{
   content:"";
   position:absolute;
   background:#000;
   left:50%; top:50%
}
a:after{
   height:1.875em;
   width:.25em;
   margin:-.938em 0 0 -.125em
}
a:before{
   height:.25em;
   width:1.875em;
   margin:-.125em 0 0 -.938em
}
a:hover:after{
   display:none
}
​