Question

我试图调整这两个div并没有成功。我希望黑色圆圈在白色圆圈内。我怎样才能做到这一点？为什么vertical-align：middle不起作用？有什么建议？

感谢。

    .discOuter {
        background: #fff;
        border: 1px solid #dedede;
        border-radius: 100%;
        height: 178px;
        margin-bottom: 18px;
        width: 178px;
    }

    .discInner {
        background: #000;
        border-radius: 100%;
        height: 155px;
        width: 155px;
        margin: 19px;
        vertical-align: middle;
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="services">
  <ul>
    <li>
      <div class="discOuter">
        <div class="discInner"></div>
      </div>
    </li>
  </ul>
</body>
</html>

Answer 1

尝试使用transform css属性

.discOuter {
    background: #fff;
    border: 1px solid #dedede;
    border-radius: 100%;
    height: 178px;
    margin-bottom: 18px;
    width: 178px;
    /**/
    position: relative;
}
.discInner {
    background: #000;
    border-radius: inherit;
    height: 155px;
    width: 155px;
    /**/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<强> Working Fiddle

Answer 2

vertical-align未考虑block-level（DIV）元素（除非您指定其他display属性，例如inline或inline-block。

＆＃13;

.discOuter {
        background: #fff;
        border: 1px solid #dedede;
        border-radius: 100%;
        height: 178px;
        margin-bottom: 18px;
        width: 178px;
    }

    .discInner {
        background: #000;
        border-radius: 100%;
        height: 155px;
        width: 155px;
        margin: 12px; /* fixed the issue */
        /*vertical-align: middle;*/
    }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="services">
  <ul>
    <li>
      <div class="discOuter">
        <div class="discInner"></div>
      </div>
    </li>
  </ul>
</body>
</html>

＆＃13;

Answer 3

将.discOuter设为display: table-cell：

<强>段：

＆＃13;

    .discOuter {
        background: #fff;
        border: 1px solid #dedede;
        border-radius: 100%;
        height: 178px;
        margin-bottom: 18px;
        width: 178px;
display: table-cell;
text-align: center;
vertical-align: middle;
    }

    .discInner {
        background: #000;
        border-radius: 100%;
        height: 155px;
        width: 155px;
        margin: 19px;
        
    }

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="services">
  <ul>
    <li>
      <div class="discOuter">
        <div class="discInner"></div>
      </div>
    </li>
  </ul>
</body>
</html>

＆＃13;

Answer 4

您可以使用pseudo元素来提供边框，如下例所示

演示 - http://jsfiddle.net/victor_007/3o1Ljces/

ul {
  list-style: none;
}
.discInner {
  background: #000;
  border-radius: 100%;
  height: 100px;
  width: 100px;
  margin: 19px;
  position: relative;
  vertical-align: middle;
  box-sizing: border-box;
}
.discInner:before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
  border: 1px solid #dedede;
  border-radius: 50%;
}

<ul>
  <li>
    <div class="discInner"></div>
  </li>
</ul>

或者您还可以使用-ve margin来对齐旧版本支持的div，将宽度和高度更改为均匀，以便我可以减去{{的一半值1}}

演示 - http://jsfiddle.net/victor_007/ejnfgzx5/2/

margin

ul {
  list-style: none;
}
.discOuter {
  background: #fff;
  border: 1px solid #dedede;
  border-radius: 100%;
  height: 178px;
  margin-bottom: 18px;
  width: 178px;
  position: relative;
}
.discInner {
  background: #000;
  border-radius: inherit;
  height: 156px;
  width: 156px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -78px 0 0 -78px;
}

对齐两个带圆圈的div

4 个答案: