テキスト内ボタンが中央に配置されていません

-2

ボタンを作成していますが、私のCSSファイルの中にdisplay: block;とtext-align: center;を使用していても、テキストが少しばかりオフになっています。テキスト内ボタンが中央に配置されていません

ここで私のボタンは、私の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を使用していることに気付かなかった場合にも。

水平センタリングする

出典

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

一つの簡単な修正プログラムは、このjsfiddleのように、含むdiv要素の高さと行の高さを使用することです：

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

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

か負のマージンと絶対的な位置決めを使用することもできますが、それはややフレキシブルですル。

出典

2016-05-16 10:22:42 zoubida13

なぜあなたはボタンとしてdiv要素を使用している、ハイパーリンクとCSSのHTMLボタンを使用するには正常に見える

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

出典

2016-05-16 10:24:32

テキスト内ボタンが中央に配置されていません

答えて

関連する問題