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

时间:2017-02-01 11:12:30

标签: html css positioning

我希望文本居中,我试图移动文章容器,定位它,同时我尝试将文本和图像放在一行中浮动,但它只有在我将整个部分内联时 - 块,旁边的内联和文章内联块。是的,我已经阅读了我在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>
&#13;
&#13;
&#13;

The result

2 个答案:

答案 0 :(得分:2)

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

&#13;
&#13;
#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%;
    
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您希望将文本与图像垂直居中。所以你可以用flexbox来解决这个问题:

&#13;
&#13;
#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%;
}
&#13;
<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>
&#13;
&#13;
&#13;