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

Question

我希望文本居中，我尝试移动文章容器，定位它，我还尝试使文本和图像 float 在一行中，但只有当我使整个部分内联时它才有效- block ，aside inline 和 article inline-block。是的，我已经阅读了我可以在 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>

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>