Question

我正在创建一个非常基本的占位符网站。居中，在页面中间，它应显示为：

（公司徽标）网站即将于2018年开始

公司徽标使用与文本相同的字体。

默认情况下，图像很好地与文本并排放置，但是当我尝试集中对齐时，这会发生变化。

＆＃13;

body {
  background-color: #fff;
  background-size: cover;
  text-align: center;
}

img {
  float: left;
  width: 350px;
}

h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

＆＃13;

<body>
  <div class="header">
    <img src="http://via.placeholder.com/350x100" alt="logo" />
    <h1>WEBSITE COMING IN 2018</h1>
  </div>
</body>

＆＃13;

最有效的方法是什么？

Answer 1

您可以使用flexbox

来解决此问题

body {
  background-color: #fff;
  background-size: cover;
  /* added */
  margin: 0;
  height: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header {
  display: flex;
  text-align: center;
  align-items: center;
}

<body>
  <div class="header">
    <img src="http://via.placeholder.com/350x100" alt="logo" />
    <h1>WEBSITE COMING IN 2018</h1>
  </div>
</body>

Answer 2

您可以在display: flex;元素

上使用.header，如下所示

＆＃13;

body {
  background-color: #fff;
}

img {
  width: 200px;
}

h1 {
  margin-left: 10px;
  line-height: 100%;
}

.header {
  display: flex;
  justify-content: center;
}

＆＃13;

<body>
  <div class="header">
    <img src="http://via.placeholder.com/350x100" alt="logo" />
    <h1>Website Coming in 2018</h1>
  </div>
</body>

＆＃13;

注意：文本的轻微垂直偏移是由于其基线下方的空间所致，该空间是为j，g，p等字母保留的，这些字母延伸到基线以下。只要在文本中使用任何这些字母，它就会完美居中。我将大写字母更改为常规文本模式以演示此内容。

将图像与文本对齐

2 个答案: