html - 用文字和图片居中一个div

Question

我试图将包含两个 div 的 div 居中 - 一个是段落，另一个是图像。我尝试将自动 0 边距应用于容器 div，但它没有居中任何内容。有没有办法让一切都居中，同时保留我在较小的 div 中所做的格式设置？ 我的代码

.whole {
  height: 800px;
  max-width: 98%;
  margin-left: 0 auto;
  margin-right: 0 auto;
  text-align: center;
}
.about-text {
  width: 40%;
  color: #66096c;
  font-family: Lucida bright;
  font-size: 20px;
  height: 100%;
  float: left;
  padding: 1.8 em;
  padding-right: 6em;
  margin-left: 5%;
  margin-right: auto;
}
.about_pic {
  width: 40%;
  height: 100%;
  float: left;
  margin-left: auto;
  margin-right: auto;
}

<div class="whole">
  <div class="about-text">
    <p> <strong> Hi, I'm Kelsie. </strong> 
      <p>
        <p>Hello there.
          <br />My name is Kelsie, and I like to create things. So I decided to do it for a job. I am learning how to do this at Michigan State University, where I study professional writing. This program teaches web design, print design, editing, and writing.
          I am also learning about how to make rhetorical decisions that will have a positive impact on an audience by studying visual design principles, website accessibility and usability laws, and persuasion techniques.</p>
        <p>I live in East Lansing where I am a full-time student. So basically I study all the time. On the rare occasions that I do have some free time, I like to read, shop, and visit my <span> home</span> cats.</p>
        <p>Want to create something together? Me too. Send me a message using the contact form, and let's get together.</p>
  </div>

  <div class="about_pic">
    <img src="https://msu.edu/~donald88/kelsie.jpg" alt="kelsie by river" align="center" />
  </div>
</div>

Answer 1

如果您希望行中的元素相同高度，一个不错的选择是flexbox .如果宽度(例如文本)变小，请使用 media query并将 div 和 flex-direction: column 设置为 100%。

总计它可能看起来像:

body {
  margin: 0;
}
.whole {
  display: flex;
  text-align: center;
  width: 95%;
  margin: 0 auto;
}
.whole div {
  padding: 2em;
  box-sizing: border-box;
}
.about-text {
  color: #66096c;
  font-family: Lucida bright;
  font-size: 20px;
}
@media screen and (max-width: 1000px) {
  .whole {
    flex-direction: column;
  }
  .whole div {
    width: 100%;
  }
  .whole img { /* Make image responsive */
    max-width: 100%;
    height: auto;
  }
}

<div class="whole">
  <div class="about-text">
    <p> <strong> Hi, I'm Kelsie. </strong> 
      <p>
        <p>Hello there.
          <br />My name is Kelsie, and I like to create things. So I decided to do it for a job. I am learning how to do this at Michigan State University, where I study professional writing. This program teaches web design, print design, editing, and writing.
          I am also learning about how to make rhetorical decisions that will have a positive impact on an audience by studying visual design principles, website accessibility and usability laws, and persuasion techniques.</p>
        <p>I live in East Lansing where I am a full-time student. So basically I study all the time. On the rare occasions that I do have some free time, I like to read, shop, and visit my <span> home</span> cats.</p>
        <p>Want to create something together? Me too. Send me a message using the contact form, and let's get together.</p>
  </div>

  <div class="about_pic">
    <img src="https://msu.edu/~donald88/kelsie.jpg" alt="kelsie by river" align="center" />
  </div>
</div>