将图像和文本定位在一行中。文字不会居中

Question

我想让文字居中，我试着移动文章容器，定位它，我也试着让文字和图片在一行中浮动，但只有当我制作整个部分时它才有效inline-block，aside inline 和 article inline-block。是的，我已经阅读了可以在 google 和 Whosebug 中找到的内容。运行整页代码片段查看结果

#about-me{
    display: inline-block;
    position: relative;
    width: 100%;
    background: rgb(71.2%, 53.7%, 90.5%);
}
#about-me aside{
    display: inline;
}

#about-me article{
    display: inline-block;
    width: 50%;
    height: auto;     
    margin: 0 auto;
}
#about-me h2{
    text-align: center;
    font-size: 200%;
} 
#about-me p{
    text-align: center;
    font-size: 150%;
    
}

            <section id="about-me">
                <aside>
                  <img src="http://blog.debugme.eu/wp-content/uploads/2016/01/great-frontend.png" alt="" />
                </aside>
                <article>
                    <h2>Test</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nihil doloribus molestias perferendis quaerat nam consectetur magni asperiores. Et minus ratione atque delectus adipisci distinctio, mollitia! Repellat illo sunt rerum.</p>
                </article>
          </section>

The result

Answer 1

将text-align: center;设置为#about-me

#about-me{
    display: inline-block;
    position: relative;
    width: 100%;
    background: rgb(71.2%, 53.7%, 90.5%);
    text-align: center;
}
#about-me aside{
    display: inline-block;
    float: left;
}

#about-me article{
    display: inline-block;
    width: 50%;
    height: auto;     
    margin: 0 auto;
}
#about-me h2{
    display: inline-block;
    font-size: 200%;
} 
#about-me p{
    font-size: 150%;
    
}

<section id="about-me">
                <aside>
                  <img src="http://blog.debugme.eu/wp-content/uploads/2016/01/great-frontend.png" alt="" />
                </aside>
                <article>
                    <h2>Test</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nihil doloribus molestias perferendis quaerat nam consectetur magni asperiores. Et minus ratione atque delectus adipisci distinctio, mollitia! Repellat illo sunt rerum.</p>
                </article>
          </section>

Answer 2

您想使文本与图片垂直居中。所以你可以使用flexbox来解决这个问题：

#about-me {
  display: flex;
  width: 100%;
  background: rgb(71.2%, 53.7%, 90.5%);
  flex-wrap:wrap;
}
#about-me aside {
  display: inline;
}
#about-me article {
  align-self:center;
  display: inline-block;
  margin:0 auto;
  width: 50%;
}
#about-me h2 {
  text-align: center;
  font-size: 200%;
} 
#about-me p {
  text-align: center;
  font-size: 150%;
}

<section id="about-me">
  <aside>
    <img src="http://blog.debugme.eu/wp-content/uploads/2016/01/great-frontend.png" alt="" />
  </aside>
  <article>
    <h2>Test</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non nihil doloribus molestias perferendis quaerat nam consectetur magni asperiores. Et minus ratione atque delectus adipisci distinctio, mollitia! Repellat illo sunt rerum.</p>
  </article>
</section>

将图像和文本定位在一行中。文字不会居中

Positioning image and text in one line. Text won't center

html

css

positioning