Question

我正在尝试制作一个按钮，当用户打开文本标签时，该按钮会展开。它运作正常，我有两个问题：

我无法让按钮中的文字完全居中。这很奇怪，当我将line-height减少到0％时，文本实际上会下降。
由于某种原因（on mobile vs on computer）

以下代码（请原谅我，我是HTML n00b）

function myFunction() {
    var x = document.getElementById('myDIV');
    var y = document.getElementById('myDIV2');

    var elem = document.getElementById("btn");

    if (x.style.opacity == 1) {
      x.style.opacity = 0;
      y.style.opacity = 0
      elem.innerHTML = "+";
    } else {
      x.style.opacity = 1;
      y.style.opacity = 1;
      elem.innerHTML = "-";
    }
}

@-webkit-keyframes pulsate
{
      0%   {border-color: #fff;}
      50%  {border-color: #FF6B35;}
      100% {border-color: #fff;}
}

body {
    background-color: black;
}

.myDIV {
    width: 100%;
    padding: 20px 0;
    text-align: center;
    background-color: white;
    color: black;
    opacity: 0;
    font-family: "Verdana";
}
.btn {

  font-size: 200%;
  display:block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 2px white solid;
  color: white;
  background-color: transparent;
  margin: 0 auto;
  line-height: 10%;
  animation: pulsate 2s infinite;
  outline: none;
  font-family: "Verdana";

}

.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      border: 1px solid white; /* This is default border style for <hr> tag */
      margin: 0 auto;
      opacity: 0;
}

<body>

<div class="myDIV" id="myDIV">This is my DIV element.</div>

<div class="vertical-line" id="myDIV2" style="height: 90px;"></div>

<button class="btn" id="btn" onclick="myFunction()">+</button>

</body>

Answer 1

您可以使用flex-box。使垂直和水平对齐元素更容易。查看 https://css-tricks.com/snippets/css/a-guide-to-flexbox/以获取简单指南。

在.btn CSS选择器上，更改/添加以下属性和值：

font-size: 200%;
display: block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 2px white solid;
color: white;
background-color: transparent;
margin: 0 auto;
line-height: 0%;
animation: pulsate 2s infinite;
outline: none;
font-family: "Verdana";
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

为防止拉伸，请添加max-width属性和值

max-width: 50px;

这应该可以解决这两个错误。

移动按钮

1 个答案: