Question

我的字体位置有问题。我是用CSS做事的新手。我很高兴我到目前为止我的小项目:)但在这一点上我不知道我必须做什么。目前它看起来像这样：

我无法移动字体。我尝试过padding＆amp;余量。我总是可以向下和向右移动它。我希望，有人可以帮助我。

body {
  margin: 0 auto;
}

.container {
  width: 400px;
  height: 380px;
  border-radius: 6px;
  text-align: center;
  background-color: rgba(51, 51, 51, 0.8);
  margin: 0 auto;
  margin-top: 20%;
}

.form-input {
  margin-top: auto;
}

.btns {
  background-color: rgba(36, 153, 0, 0.7);
  border-radius: 6px;
  border: none;
  width: 300px;
  height: 75px;
  margin-top: 39px;
  color: white;
  font-size: 60px;
  font-family: Sun Valley;
  text-align: left;
  padding-left: 90px;
  top: -10px;
}

.btn_login {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url(../imgs/login.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 46px;
  margin-left: 15px;
}

.btn_register {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url(../imgs/register.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 46px;
  margin-left: 15px;
}

.btn_rules {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url(../imgs/rules.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: 46px;
  margin-left: 15px;
}

@font-face {
  font-family: "Sun Valley";
  src: url(../fonts/sun_valley.ttf);
}

<html>

<link rel="stylesheet" href="css/loginscreen.css"></link>

<body>
  <div class="container">
    <div class="box">
      <div class="form-input">
        <em class="btn_login"></em>
        <button class="btns"><em class="test">Anmelden</em></button>
      </div>
      <div class="form-input">
        <em class="btn_register"></em>
        <button class="btns">Registrieren</button>
      </div>
      <div class="form-input">
        <em class="btn_rules"></em>
        <button class="btns" type="button" onclick="js/">Regelwerk</button>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

将line-height上的.btns设置为与其高度相同的值。在你的情况下，它将是

line-height: 75px;

您可能需要根据字体调整该值。

Answer 2

margin-top课程的btns为39px，这是从容器顶部推下来的内容。

Answer 3

我认为问题在于您使用的是自定义字体。尝试更改按钮中字体的line-height和font-size。

Answer 4

我认为你需要把

Application.Quit acQuitSaveNone

永远不要在按钮中使用边距，最好在按钮内部使用填充空间。

CSS - 无法在我的按钮中移动字体

4 个答案: