用文字和图片将 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 的 with 为 100% 和 flex-direction: column。

总的来说可能看起来像：

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>

Answer 2

不要使用margin-left: 0 auto 和margin-right: 0 auto。 只需在主 div 上使用 margin: auto。

Answer 3

为文本提供margin-left:30%;，因为您的 div 宽度为 50%，并从中删除所有右边距，就好像 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;
  margin-left:30%;
}
.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 4

使用传统的盒子模型，padding-left 和 padding-right被添加到元素的 width。所以你的.about-text 超过了你定义的40% 1.8em + 6em。

尝试将以下内容添加到您的 CSS 以将 box-model 切换为更直观的模型：

body, html {
  box-sizing: border-box; /* as opposed to the default content-box */
}
*, *:before, *:after {
  /* make that the default box-model for all elements, still allowing simple override if needed */
  box-sizing: inherit;
}

下一个问题是浮动。如果一个元素只包含浮动元素，它将折叠到0 的高度。您需要清除父元素上的浮动以使其包含浮动。你可以使用所谓的clearfix：

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

并将该类应用于您想要包含浮动子级的任何容器。

Answer 5

您总是可以直接在 HTML 中添加 <center> 和 </center>...还是我误解了您的问题？