將圖像和文字定位在一行中。文本不會居中

Question

我希望文本居中，我試圖移動文章容器，將其放置，同時我試圖使文本和圖像浮在一行中，但它只在我製作整個部分內聯塊，旁邊內聯和文章內聯塊。是的，我已經閱讀了我在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

你想垂直居中與你的形象的文字。所以，你可以使用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>

Answer 2

設置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>