CSS - 如何在没有类或ID的情况下居中图像?

时间:2015-09-15 15:30:05

标签: css css3

我有以下代码:

<footer>
    <p>
        Some text ...
    </p>
    <p>
       <img ...>
    </p>
</footer>

我可以使用以下代码集中所有<p>内容:

footer p {
    text-align: center;
} 

但我怎么能只把图像居中? 注意:我无法更改html代码。

2 个答案:

答案 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;
}