Как отцентрировать текст в div с фиксированной шириной?

Question

Я пытаюсь центрировать текст внутри элемента с заданной шириной. Я не устанавливаю ширину текстовых центров, если я делаю это не так. Мне нужно установить ширину, потому что это влияет на размер большего контейнера, и я хочу, чтобы контейнеры были одинакового размера.

Я попытался поместить на него обертку и установить для левого и правого полей значение auto. Я попробовал это на этом непосредственно. Я пробовал выравнивание текста: по центру и на обертке.

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

Я что-то упустил? - Когда я помещаю текст в центр выравнивания, он работает.

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

У меня нет кнопки запуска в codepen, но если я проверяю ее, она работает

Answer 3

text-align: center; до класса .w-train-desc выполнил задание ... или я упустил вашу точку зрения?