使用显示器内嵌块时文字偏离中心

我网站上的徽标文本出于某种原因不在本地。通过关闭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

使用显示器内嵌块时文字偏离中心

回答

相关问题