ディスプレイのインラインブロックを使用しているときにテキストがずれて表示される

Question

私のサイトのロゴのテキストは何らかの理由でオフセンターです。 display: inline-blockをオフにして、もう一度中央に置くことができます。しかし、これはテキストの周りの間隔を平らにし、テキストの上にスペーシングを戻すことができません（インライン要素の垂直パディングはできません）。
テキストを背景色で中央に配置する方法はありますか？ （text-align: centerを追加しようとすると、何らかの理由でクロムのdevのツールに自動的に採点される？

HTML

<h1 class="logo"> 
       <a href="/"><span class="text logo-title">SomeLogoText</span></a> 
      </h1> 

以下（CSS）

h1.logo { 
     font-family: "Roboto Slab", arial, sans-serif; 
     margin-top: 0; 
     margin-bottom: 0; 
     font-weight: bold; 
     font-size: 15px; 
     float: left; 

     a { 
      color: #fff; 
      padding: 15px 30px; 
      display: inline-block; 
      text-align: center; 
      line-height: 1.4; 
      max-width: 155px; 
      background: @color; 
      .border-radiuses(0, 4px, 4px, 0); 
      .transition (color 0.4s ease-in-out); 
      position: relative; 
      font-size: 20px; 

      &:hover { 
       text-decoration: none; 
      } 
     } 
     .logo-title { 
      vertical-align: middle; 
      line-height: 1.6; 
     } 
    } 

Answer 1

インライン要素無視するwidth、またmax-widthである。

あなたのテキストは、あなたのLESSコードで指定したmax-width: 155px;に合わないだけです。

はできるだけ早くあなたがから要素をdisplay: inline-block;を取るように、デフォルトあたりdisplay: inline;となり、したがって、はあなたmax-width: 155px;を無視し、その要素がテキストを含むように広くなります。

これらに固執する必要がある場合は、padding-leftとpadding-rightを減らしてください。 padding: 15px 10px;とあなたのテキストが当てはまるかどうかを確認してください。あなたが必要なもの

Answer 2

のいずれかです：

• は
• （現在値155px）.aにMAX-とを増やすテキストが収まるまで右.a（電流値30px） 上/左パディングを削減背景

Answer 3

ロゴが動的に変更されないので、ボックスに固定幅を与えることで逃げることができたら、ボックスをロゴの幅に合わせるか、テキストを中心にして幅を広げてください。縦の間隔が必要な場合は、ロゴリンク自体を含むロゴの内側にインラインブロック要素を追加することができます