在图像旁边的 header 内水平居中文本

Question

我正在尝试将横幅中的一些文本居中（我知道的经典问题）。此横幅分为 12 列，在 left-most 列中有一个用于关闭 window 的十字图标。文本在十字图标和横幅末尾之间的可用 space 中居中，而不是在整个横幅宽度中居中。从代码的编写方式来看，我不明白为什么要这样做。这是 HTML:

<div class='col-xs-12 banner'>
            <a class="navbar-brand cross-link" href="" ng-click="close()">
                <img class="cross" src="/components/cross.png" alt="close">
            </a>
        <h1>{{title}}</h1>
</div>

与 CSS:

.banner {
height: 70px;
background-color: red;
h1 {
  color: white;
  text-align: center;
}
.navbar-brand {

  &.cross-link {
    padding: 0px;
    img.cross {
      margin: auto;
      width: 70px;
      height: 70px;
      padding: 29px 28px 27px 28px;
    }

  }

}

当我在 Chrome 上检查它时，h1 很高兴地像预期的那样坐在 full-width 容器中，但图像似乎在移动它，因此它不会正确居中。你能看到如何解决这个问题吗？

谢谢

Answer 1

您可以将 .cross-link 设置为绝对位置。请记住将容器位置属性设置为不同于 "static":

的值

.container{ position: relative; }

.cross-link{ position: absolute; left: xxxx; top: xxxx; }

Answer 2

您缺少的是在您的 .banner 块末尾或在您分享的 css 末尾结束 }。

在图像旁边的 header 内水平居中文本

Horizontally centering text within a header next to an image

html

css

bootstrap-modal