在父级内安装填充以实现垂直居中答案

【问题标题】：Fitting padding within parent for vertical centering在父级内安装填充以实现垂直居中
【发布时间】：2021-05-19 18:38:18
【问题描述】：

我想我基本上就在那里。我有一个高度为 200 像素的 DIV 和一个 150 像素的内部。这给我留下了 50px 的图像标题。然后我想在剩余的 50px 内垂直居中文本。

.captioned {
  width: 300px;
  height: 200px;
  display: flex;
  margin: 10px;
  background-color: #FFFFFF;
  border: solid 4px #000000;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.captioned-inner {
  width: 100%;
  margin: 0;
}

.preview {
  height: 150px;
  width: 100%;
}

.preview-image {
  height: 100px;
  max-width: 100%;
  margin-top: 25px;
  margin-bottom: 25px;
}

.info {
  padding: 5px;
  box-sizing: border-box;
  height: 50px;
}

.info-inner {
  box-sizing: border-box;
}

.name {
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

<div class="captioned">
   <div class="captioned-inner">
      <div class="preview" style="background-color: #DE16C7 !important">
         <img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
      </div>
      <div class="info">
         <div class="info-inner">
            <p class="name">Google</p>
         </div>
      </div>
   </div>
</div>

我希望代码对我想要实现的目标有意义。我想知道如何将填充合并到 50px 高度，除非我应该垂直居中并填充文本，但这似乎是一种更糟糕的方法。

【问题讨论】：

不要使用填充来居中项目....有更好的方法，包括 flexbox。
我没有使用填充来居中，填充用于主外框内，这样文本就不会接触边缘。实际图像始终具有相同的高度，因此边距足以使用@Paulie_D
@learningtoanimate 我再次编辑了它，这对你有用，保持高度 200px，如你之前提到的
我今天会测试它，也只是在处理其他元素@Ac_mmi

标签： html css

【解决方案1】：

只需使用display:flex 和align-items:center 来垂直对齐文本

正如您在 .captioned 类中提供了 box-sizing:border-box 一样，它也会在 200px 高度中包含边框，这意味着

height of the container + top border + bottom border=200px

所以.preview 容器的高度应该是150px - top border(i.e 4px)=146px 而.inner 容器的高度应该是50-4 =46px;

这对你有用。

.captioned {
  width: 300px;
  height: 200px;
  display: flex;
  margin: 10px;
  background-color: #FFFFFF;
  border: solid 4px #000000;
  border-radius: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.captioned-inner {
  width: 100%;
  margin: 0;
}

.preview {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 146px;
  width: 100%;
}

.preview-image {
  height: 100px;
  max-width: 100%;
}

.info {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 46px;
}

.info-inner {
  box-sizing: border-box;
}

.name {
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1;
  overflow-wrap: anywhere;
}

<div class="captioned">
  <div class="captioned-inner">
    <div class="preview" style="background-color: #DE16C7 !important">
      <img class="preview-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </div>
    <div class="info">
      <div class="info-inner">
        <p class="name">Google</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

我没有使用所有这些，但是用 flex 设置对齐就足够了，谢谢。