Question

我网站上的徽标文字由于某种原因而异乎寻常。我可以通过关闭display: inline-block使其再次居中。然而，这会使文本周围的间距变平，我无法在文本上方留出间距（不能对内联元素进行垂直填充）。
我怎么能用背景颜色居中文本？（由于某些原因，尝试添加text-align: center会自动在Chrome开发工具中进行评分吗？

HTML

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

less（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;因此元素变宽以包含文本。

如果您必须坚持使用155px，那么您可以尝试减少padding-left和padding-right，例如padding: 15px 10px;并查看您的文字是否适合。

Answer 2

您需要的是：

在.a（当前值155px）
在.a上左/右减少填充（当前值30px）直到文本适合背景

Answer 3

如果徽标可以让盒子有一个固定的宽度，因为文本不会动态改变，只需将盒子与徽标宽度相匹配（或者将中心文本放宽）。如果您需要垂直间距，可以在徽标内添加一个包含徽标链接本身的内联块元素

使用显示内联块时文本偏离中心

3 个答案: