Question

这里我正在创建一个按钮，但由于一些奇怪的原因，即使我在我的css文件中使用了display: block;和text-align: center;，文本也有点偏离并且没有居中。

第30行是我的按钮在这里开始的地方是我的html和自定义css代码。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="bootstrap/js/jquery-2.2.3.min.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href='https://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <title>Proto X Media - Home</title>
  </head>
  <body>
    <div class="bg1">
      <div class="container">
        <div class="row">
        <div class="col-md-6">
          <img class="lgsize" src="logo.gif" alt="Logo">
        </div>
        <div class="col-md-6">


        </div>
      </div>
        <div class="row">
          <div class="pushdown">
          <div class="col-md-6 col-md-offset-3">
          <span class="text-center title">Proto X Media</span>
          <p class="text-center subtext">Professional Media Production & Hardware Consultation.</p>
          <div class="buttonpad">
          <div class="button">
            <span>Explore</span>
          </div>
          </div>
        </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  </html>

这是我第39行的css，我的按钮的代码是

.title {
  font-family: 'Bree Serif', serif;
  font-weight: 800;
  font-size: 500%;
  color: 373d44#;
  display: block;
  text-align: center;
}
.bg1 {
  background-image: url("bg2.jpg");
  background-size: cover;
}
.lgsize {
  width: 120px;
  height: 110px;
}
.pushdown {
  padding-top: 100px;
  padding-bottom: 250px;
}
.menu {
  font-size: 100%
  font-family: 'Bree Serif', serif;
}
a {
  color:inherit;
  text-decoration: none;
}
a:hover {
  background-color: transparent;
  text-decoration: none;
}
.subtext {
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  display: block;
}
.button {
  width: 82.61px;
  height: 37.65px;
  box-sizing: border-box;
  background-color: white;
  font-weight: 700px;
  box-shadow: 0px .2em 0px 0px #ebebeb;
  display: block;
  text-align: center;
  background-position: center;
  border: none;
  margin: auto;
  font-family: 'Bree Serif', serif;
}
.buttonpad {
  padding-top: 10px;
}

非常感谢！此外，如果您没有注意到我正在使用Bootstrap作为我的网格。

Answer 1

对于水平居中，将标记更改为此，你应该没问题

<div class="button"><span>Explore</span></div>

当使用内联元素断行时，该换行符会在末尾略微向左推动文本

对于垂直居中，请使用线高，如下

.button {
  width: 82.61px;
  height: 37.65px;
  line-height: 37.65px;              /*  added property  */
  box-sizing: border-box;
  background-color: white;
  font-weight: 700px;
  box-shadow: 0px .2em 0px 0px #ebebeb;
  display: block;
  text-align: center;
  background-position: center;
  border: none;
  margin: auto;
  font-family: 'Bree Serif', serif;
}

Answer 2

尝试使用这样的填充;

 padding: 6px 12px;

OR

.button{
  cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

Answer 3

一个简单的解决方法是使用line-height作为包含div的高度，就像在这个jsfiddle中一样：

.button span
{
  display: block;
  line-height: 37px;
}

https://jsfiddle.net/az2vs6y3/1/

或者您也可以使用负边距和绝对定位，但它的灵活性稍差。

Answer 4

为什么使用div作为按钮，使用html按钮获取超链接，css看起来很好

<input type="submit" value="Explore">

按钮内的文字不居中

4 个答案: