使用顯示器內嵌塊時文字偏離中心

我網站上的徽標文本出於某種原因不在本地。通過關閉display: inline-block，我可以使其重新居中。但是，這會使文本週圍的間距變得平坦，並且我無法將間距重新放回文本之上（無法對內聯元素執行垂直填充）。
我如何能夠使文字與背景顏色居中？（嘗試添加text-align: center在Chrome開發工具自動評分因故？使用顯示器內嵌塊時文字偏離中心

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

來源

2016-12-02 Yunti

內聯元素ignorewidth，還有max-width。

您的文本根本不符合您在LESS代碼中指定的max-width: 155px;。

只要你把display: inline-block;關閉元素，它成爲display: inline;每默認從而忽略您max-width: 155px;等元素變得更寬包含的文本。

如果您必須堅持那些155px您所能做的就是儘量減少padding-left和padding-right，例如， padding: 15px 10px;，看看你的文字是否適合。

來源

2016-12-02 16:37:18 connexo

感謝您解釋得非常好。這是一個很大的幫助 – Yunti

你需要的是兩種：

增加Max-與.a（當前值155px）
減少左/右上.a（當前值30像素）填充直到文本適合背景

來源

2016-12-02 16:41:56 ntahoang

如果一個標誌可以脫離給出一個固定的寬度，因爲文本不會動態改變，只是將標誌寬度（或更寬的居中文字）匹配。如果你需要垂直間距，你可以在包含徽標鏈接本身的徽標內添加一個嵌入塊元素

來源

2016-12-02 16:43:43

使用顯示器內嵌塊時文字偏離中心

回答

相關問題