Question

我想将加号放在圆圈中间的下方。现在我尝试使用top，left属性。这只适用于一台设备。当我在智能手机上查看该页面时，一切都丢失了。所以我需要一个方法位置而不使用顶部和左侧，这样移动圆圈不会影响加号（它将保留在中心）。

我的代码：

<html>
<body>
    <div id="button"><div id="plus">+</div></div>
</body>

<style>

    #button
    {
        position : relative;
        width : 100px;
        height : 100px;
        border-radius : 100%;
        background-color : red;
    }

    #plus
    {
        display : inline-block;
        position : absolute;
        width : 50%;
        height : 50%;
        margin : auto;
        left : 5px;
        font-family : sans-serif;
        font-size : 40px;
        color : black;
        vertical-align : middle;
        text-alignment : center;    

    }
</style>

Answer 1

你所需要的只是在加号上留下25％左右

<html>

<body>
  <div id="button">
    <div id="plus">+</div>
  </div>
</body>

<style>
  #button {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: red;
  }
  #plus {
    display: block;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    font-family: sans-serif;
    font-size: 40px;
    color: black;
    vertical-align: middle;
    text-align: center;
  }
</style>

</html>

Answer 2

This fiddle包含一个在更新字体大小时保持中心位置的版本。但它确实依赖于CSS3的translate-y。如果支持旧浏览器是一个问题，请检查this resource以查看支持哪些浏览器。根据我的评论，由于字体变化，不能保证完美。

Answer 3

另一个选择是将display:table-cell添加到父div。这个问题在this SO question.

中得到了很好的解决

以下是我最终的结果：http://jsfiddle.net/117ew9Lf/

Answer 4

您是否尝试对齐外部div或div中的加号？看到这个小提琴定位div而不是加号：http://jsfiddle.net/yfLxd5zk/

#button
{
    position : fixed;
    top:0; 
    left:0;
    width : 100px;
    height : 100px;
    background-color : red;
}

#plus
{
    position : relative;
    width : 50%;
    height : 50%;
    top:25%;
    margin : 0 auto;
    background:orange;        
    text-align:center;
}

Answer 5

#button
{
    position : relative;
    width : 100px;
    height : 100px;
    border-radius:50%;
    background-color : red;
    vertical-align : middle;
    text-align : center;   
}

#plus
{

    position : absolute;
    height:20%;
    wudth:20%;
    margin : 40%;
    font-family : sans-serif;
    font-size : 40px;
    line-height:50%;
    color : black;


}

+

Answer 6

这不是line-height的理想情况，因为“plus”字面上是字体字符而且包装器指定了尺寸吗？

CSS

#plus {     
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 48px;
    background: red;
}

HTML

<div id="plus">+</div>

http://jsfiddle.net/cibulka/d68s58xx/

Answer 7

我遇到了同样的问题，我通过以下方式解决了该问题。

<div id="main_content" >
   <div id="container">
      Some Contents
   </div>
</div>

#main_content {
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    background-color: #2185C5;
    position: relative;
}

#container {
     width: 50px;
     height: 50px;
     padding: 10px;
     background-color: red;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

输出：

将div放在另一个div的中间

7 个答案:

CSS

HTML