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

用户名

我希望文本居中，并尝试移动文章容器，将其定位，还尝试使文本和图像浮于一条直线，但仅当我将整个部分放在行内时才起作用。除了内联和文章内联块。是的，我已经阅读了在Google和stackoverflow中可以找到的内容。在整个页面中运行代码片段以查看结果

#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>

结果

塞巴斯蒂安·布罗施（Sebastian Brosch）

您想使文本与图像垂直居中。因此，您可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。