HTML

Question

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

我尝试在上面放一个包装纸，并将左右边距设置为自动。我已经直接尝试过了。我试过了text-align：将其居中并放在包装上。

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

我想念什么吗？ -当我在其上放置文本对齐中心时，它就可以工作。

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

我似乎在Codepen中没有运行按钮，但是如果我检查它，它会起作用

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

HTML

CSS

3 个答案: