Question

我想创建一个以x为中心的按钮，该按钮位于圆边框的内部。如何将x在圆内垂直和水平居中？我愿意提供与提供的代码不同的方式。

非常感谢您的帮助，谢谢

https://codepen.io/glittergirl/pen/xybOzL

#mdiv {
  position: fixed;
  right: 0;
  top: 0;
  margin: 20px;
  border: 2px solid #000;
  border-radius: 16px;
  width: 34px;
  height: 34px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.mdiv {
  height:25px;
  width:3px;
  background-color: #000;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
      -ms-transform: rotate(45deg); /* IE 9 */
  Z-index:1;
}

.md {
  height:25px;
  width:3px;
  background-color:#000;
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
      -ms-transform: rotate(90deg); /* IE 9 */
          transform: rotate(90deg);
  Z-index:2;
}

Answer 1

您可以使用left&top: 50%和transform: translate(-50%, -50%)居中

有关示例，请参见此codepen。 https://codepen.io/anon/pen/vVEKbV

Answer 2

尝试一个简单且更少代码的版本。

.circle-button {
 border-radius: 100%;
 border: 3px solid #000;
 display: inline-block;
 padding: 20px 30px;
 font-size: 50px;
}

.circle-button:after {
 content: "\274c";
}

<div class="circle-button"></div>

如何使用CSS将div置于圆形按钮的内部

2 个答案: