Позиционирование изображения и текста в одной строке. Текст не будет центрирован

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>