我有以下代码:
<footer>
<p>
Some text ...
</p>
<p>
<img ...>
</p>
</footer>
我可以使用以下代码集中所有<p>
内容:
footer p {
text-align: center;
}
但我怎么能只把图像居中? 注意:我无法更改html代码。
答案 0 :(得分:5)
制作图片display:block
并使用margin:auto
将其居中。
footer p img {
display: block;
margin: auto;
}
footer p img {
display: block;
margin: auto;
}
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod veniam, ducimus enim distinctio porro officia eius voluptatem temporibus. Ea voluptas nesciunt doloremque facilis autem, unde quisquam doloribus ipsum et. Quas et temporibus fuga sunt odit
hic enim voluptate ratione numquam ab, quibusdam inventore. Eligendi blanditiis, labore pariatur quisquam voluptas perspiciatis.
</p>
<p>
<img src="http://lorempixel.com/output/food-q-c-150-150-10.jpg" alt="">
</p>
</footer>
答案 1 :(得分:1)
尝试
footer p:nth-child(2) {
text-align: center;
}