时间戳

首页 > 解决方案 > 在网格框中间对齐文本

html - 在网格框中间对齐文本

问题描述

如何垂直对齐框中间的文本？这不会在垂直中间居中文本。见下面的红色箭头。

.grid-container {
        display: grid;
        grid-template-columns: 140px 140px;
        grid-template-rows: 140px;
        align-items: stretch;
    }

img {
  width: 100%;
  height: auto;
}

.test
{
  text-align:center;
  vertical-align:center;
}
<div class="grid-container" id="gridid42f08d611e2346748fbe47264fd732e0">
    <img class="imgcard mCS_img_loaded" id="imgid42f08d611e2346748fbe47264fd732e00" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
    <div class="test"> test </div>
</div>

在此处输入图像描述

测试

标签： htmlcsstwitter-bootstrap

解决方案

对align-self: center;孩子呢？（另见MDN）

那是：

.test {
  align-self: center;
}

这是您的示例，但具有额外的属性：

.grid-container {
  display: grid;
  grid-template-columns: 140px 140px;
  grid-template-rows: 140px;
  align-items: stretch;
}

img {
  width: 100%;
  height: auto;
}

.test {
  text-align: center;
  align-self: center;
}
<div class="grid-container" id="gridid42f08d611e2346748fbe47264fd732e0">
    <img class="imgcard mCS_img_loaded" id="imgid42f08d611e2346748fbe47264fd732e00" src="https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&amp;preset=gallery-tab-main-image">
    <div class="test"> test </div>
</div>

作为旁注，在您的问题中，您有vertical-align: center，这是不正确的；该vertical-align物业middle取而代之（出于任何奇怪的原因）

推荐阅读