保持元素始终居中，左侧文本

Question

我需要帮助来构建页面，我认为这很简单，但事实并非如此，至少对我而言不是。

徽标：当然，始终居中。 元素：例如，始终居中的图像。图像可以是垂直或水平的，但需要居中。 文字：元素/图片旁边。

真的没有盒子，我看到其他问题，他们试图将中心框始终居中，但是在这种情况下，我只有一个主盒子/容器，然后在图像旁边有文字/标题。

我不能做的是保持图像居中，因为如果我在图像旁边添加文本，将尝试使整个内容居中。

谢谢！

Answer 1

使用 flexbox 最容易解决水平和垂直居中的问题。只需在您的容器上设置以下内容：

display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

请注意，您也将需要height！我已经使用100vh来占据整个视口。

要将元素集中在顶部，只需将其命名为align-self: flex-start。

从这里开始，只有一个孩子既包含中央项目又包含偏移项目，这两个项目都需要position: absolute。偏移项目还希望margin-left等于集中项目的宽度，但仅应在媒体查询内部应用。

要在移动设备屏幕的下方放置偏移项目，您需要第二个媒体查询，该查询会添加margin-top。

这可以在下面看到（在Full page之后单击Run code snippet以查看桌面视图）。

body {
  margin: 0;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  height: 100vh;
}

.top {
  border: 1px solid black;
  width: 50%;
  height: 10%;
  align-self: flex-start;
}

.inner-container {
  border: 1px solid black;
  width: 50%;
  height: 50%
}

.center, .off-center {
  position: absolute;
}

@media screen and (min-width: 769px) {
  .off-center {
    margin-left: 50%;
  }
}

@media screen and (max-width: 768px) {
  .off-center {
    margin-top: 50vh;
  }
}

<div class="container">
  <div class="top">Logo</div>
  <div class="inner-container">
    <div class="center">Center</div>
    <div class="off-center">Off-center</div>
  </div>
</div>