html - 如果文本太长，为什么图像不居中？ (使用显示 : table; margin: 0 auto; to horizontally center)

Question

问题

发生了什么

应该发生什么

出于某种原因，如果标题太长，它会导致图像及其下方的标题文本移动到最左侧。我该如何解决这个问题？

如果有人能给我提供使 img、h3 和 h4 水平居中的 css，将不胜感激!

代码

html

<div class="form-screen form-photo">
    <button class="close close-form"><span class="icon-x"></span></button>
      <div class="form-wrapper">
        <h1>Title</h1>
        <h2>Date created</h2>
        <img src="images/Beauty Gurus/Karen Yeung.jpg" alt="Karen Yeung" id="2">
       <!--if the caption is too long the image does not center-->
        <h3>EDIT: VIDEO IS LIVE!!!! Ok Night ? Owls Or Early ? Birds?! Are You Awake? My Jet Lag Is Screwing My Up And I</h3>
        <h4>Credit</h4>
      </div>
</div>

CSS

/*Style form photo*/
.form-photo .form-wrapper{
  display: table;
  margin: 0 auto;
}
.form-photo h3, .form-photo h4{
  font-weight: 300;
  font-size: 2em;
  text-transform: capitalize;
  vertical-align: middle;
}

.form-photo h2{
  margin-bottom: 20px;
}

.form-photo h3{
  font-size: 2em;
}

.form-photo h4{
  font-size: 1.5em;
}

.form-photo img{
  width: 500px;
}

Answer 1

您需要限制文本的宽度以匹配图像的宽度，或者您可以只限制父级的宽度，并将图像设置为 width: 100%。

.form-photo .form-wrapper{
  display: table;
  margin: 0 auto;
  width: 500px;
  table-layout: fixed;
}
.form-photo h3, .form-photo h4{
  font-weight: 300;
  font-size: 2em;
  text-transform: capitalize;
  vertical-align: middle;
}

.form-photo h2{
  margin-bottom: 20px;
}

.form-photo h3{
  font-size: 2em;
}

.form-photo h4{
  font-size: 1.5em;
}

.form-photo {
  width: 100%;
}

<div class="form-screen form-photo">
    <button class="close close-form"><span class="icon-x"></span></button>
      <div class="form-wrapper">
        <h1>Title</h1>
        <h2>Date created</h2>
        <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Karen Yeung" id="2">
        <h3>EDIT: VIDEO IS LIVE!!!! Ok Night ? Owls Or Early ? Birds?! Are You Awake? My Jet Lag Is Screwing My Up And I</h3>
        <h4>Credit</h4>
      </div>
</div>