按鈕不居中的文本

-2

這裏我創建了一個按鈕，但出於某種奇怪的原因，文本有點偏離，並且不居中，即使我在我的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>

這裏是我的CSS第39行上就是我的按鈕的代碼是

.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作爲我的網格。

來源

2016-05-16 Charlie Fisher

好像爲中心的我，當我跑了嗎？你能提供它如何找到你的截圖嗎？ http://www.bootply.com/hmuIAuBVsj – Gavin

是否有一個原因，你必須使用div元素作爲按鈕？你不應該這樣做.. – phamous

爲中心的水平，您的標記改變這一點，你應該罰款

<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; 
}

來源

2016-05-16 10:17:27 LGSon

嘗試使用填充這樣;

padding: 6px 12px;

.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; 
}

來源

2016-05-16 10:17:33

一個簡單的解決辦法是使用行高作爲含div的高度，如在此的jsfiddle：

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

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

或者你也可以使用負邊距和絕對定位，但它會稍微弱一些樂。

來源

2016-05-16 10:22:42 zoubida13

你爲什麼要採用div作爲按鈕，使用HTML按鈕，超鏈接和CSS看起來很好

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

來源

2016-05-16 10:24:32

按鈕不居中的文本

回答

相關問題