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