如何在固定宽度的 div 中居中文本？

Question

我正在尝试在具有设定宽度的 div 中将文本居中。如果我不这样做，我不会设置文本中心的宽度。我需要设置宽度，因为它会影响较大容器的大小，并且我希望容器大小相同。

我尝试在其上放置一个包装器并将左右边距设置为自动。我已经直接尝试过了。我试过 text-align: center on it and on a wrapper。

HTML

<div class = "br2 flex flex-row flex-wrap">
  <div class="u-all-out"> 
                      <a class = " flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
                          <div class = "flex">
                              <img class="xbig-icon br5 mb2" id = "train_img_1">
                          </div>
                          <h4 class =" dark-gray items-center hover-bblue w-train-desc" id = "train_title_1"> Here is something</h4>
                          <h6 class ="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
                      </a>
                  </div>
  <div class="u-all-out">
                    <a class = " flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
                        <div class = "flex">
                            <img class="xbig-icon br5 mb2" id = "train_img_2">
                        </div>
                        <h4 class ="dark-gray items-center hover-bblue w-train-desc" id = "train_title_2"> Here is another</h4>
                        <h6 class ="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
                    </a>
                </div>
</div>

CSS

.bg-yellow {
  background-color: yellow;
}
.u-all-in {
    padding: 4rem;
}
.u-all-out {
    padding: 3%
}
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.grow { 
  transition: all .8s ease; 
}
.br5 {
  border-radius: .5em;
}
.br2 {
  border-radius: .2em;
}
.xbig-icon {
  width: 10rem;
  height: 10rem;
}
.center {
  justify-content: center;
  align-items: center;
}
.dark-gray, h1, h2, h3 {
  color: #383A42;/*#2B2C34;*/
}
.bright-blue {
  color: #1ABFD8;
}
.hover-ul:hover > .hover-ul  {
  border-bottom: 1px solid;
}

.hover-bblue:hover > .hover-bblue  {
  color: #1ABFD8;
}
.w-train-desc {
    margin-right: auto;
    margin-left: auto;
    width: 220px;
    display: inline-block;
}

由于悬停效果的编码方式，我宁愿不需要包装器。但这让我发疯。我想要的只是设置 div/h4 的宽度，并让文本在该 div/h4 内居中。

提前谢谢你！

这是一个代码笔：https://codepen.io/allisonleigh/pen/MWWjOOa

Answer 1

这就是你想要的吗？

.bg-yellow {
  background-color: yellow;
}

.u-all-in {
  padding: 4rem;
}

.u-all-out {
  padding: 3%
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-row {
  flex-direction: row;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.grow {
  transition: all .8s ease;
}

.br5 {
  border-radius: .5em;
}

.br2 {
  border-radius: .2em;
}

.xbig-icon {
  width: 10rem;
  height: 10rem;
}

.center {
  justify-content: center;
  align-items: center;
}

.dark-gray,
h1,
h2,
h3 {
  color: #383A42;
  /*#2B2C34;*/
}

.bright-blue {
  color: #1ABFD8;
}

.hover-ul:hover>.hover-ul {
  border-bottom: 1px solid;
}

.hover-bblue:hover>.hover-bblue {
  color: #1ABFD8;
}

.w-train-desc {
  margin-right: auto;
  margin-left: auto;
  width: 220px;
  display: inline-block;
}

#train_title_1, #train_title_2 {
  text-align: center;
}

<div class="br2 flex flex-row flex-wrap">
  <div class="u-all-out">
    <a class=" flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
      <div class="flex">
        <img class="xbig-icon br5 mb2" id="train_img_1">
      </div>
      <h4 class=" dark-gray items-center hover-bblue w-train-desc" id="train_title_1"> Here is something</h4>
      <h6 class="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
    </a>
  </div>
  <div class="u-all-out">
    <a class=" flex br5 bg-yellow shadow-1 center flex-col hover-bblue grow hover-ul u-all-in" href="">
      <div class="flex">
        <img class="xbig-icon br5 mb2" id="train_img_2">
      </div>
      <h4 class="dark-gray items-center hover-bblue w-train-desc" id="train_title_2"> Here is another</h4>
      <h6 class="flex bright-blue items-center hover-bblue rm-mb rm-mt italic hover-ul">Start here</h6>
    </a>
  </div>
</div>

Answer 2

text-align: center; 到 .w-train-desc 类完成了这项工作......还是我错过了你的意思？

Answer 3

我错过了什么吗？ - 当我把 text-align center 放在上面时，它就起作用了。

.w-train-desc {
    width: 220px;
    text-align:center;
}

我在 codepen 中似乎没有运行按钮，但如果我检查它，它可以工作