1. 犀牛前端部落首页
  2. CSS百科

css图片居中多种方法总结

图片居中显示是HTML布局页面常见需求。

在本文中,俺将和大家探讨将图片居中的多种实现方法。

css图片居中多种方法总结

下面准备好,俺们即将发车~

请参阅下面的在线演示和源代码。 您也可以打开web开发者工具检查元素。

容器

在第一个示例中,俺将向您介绍如何将图片放置在容器元素(例如div,段落或任何其他标签)的中间。

/**
* 犀牛前端部落 https://www.pipipi.net/
**/
//HTML
<p class="aligncenter">
    <img src="image.jpg" alt="centered image" />
</p>
//css
<style>
.aligncenter {
    text-align: center;
}
</style>

俺使用text-align:center; CSS属性来实现。

使用margin

我们可以使用margin:auto; 使其居中。 但是我们知道img标签是内联元素,不是块元素,因此我们需要使用display:block;将img标签设置位块元素。

/**
* 犀牛前端部落 https://www.pipipi.net/
**/
//HTML
<div>
    <img class="marginauto" src="image.jpg" alt="centered image" />
</div>
//css
<style>
.marginauto {
    margin: 10px auto 20px;
    display: block;
}
</style>

center标签

虽然这是一个解决办法,但是俺非常不推荐使用center标签。

center标签已过时,这意味着HTML5不再支持该标记,但Google Chrome等网络浏览器仍支持该标记。

虽然在好几年前这是首选方法,而且它不需要设置CSS,只需要设置HTML,听起来很酷?但是可以用CSS解决的,我们就不应该用html呀 : )

/**
* 犀牛前端部落 https://www.pipipi.net/
**/
<center>
    <img src="/image.jpg" alt="centered image" />
</center>

标签属性 align=middle

与上一个示例相似,另一个不需要CSS的过时方法。 在较旧的HTML版本中,我们可以将用align =“ middle”标签属性设置图片居中。

/**
* 犀牛前端部落 https://www.pipipi.net/
**/
<img align="middle" src="image.jpg" alt="myimage" />

垂直图片居中

我们已经讨论过了如何水平对齐图像,但是在某些情况下可能需要将其垂直居中

为此,我们必须采取两个步骤。 容器元素需要显示为表格单元格,并且垂直对齐必须设置为中间。

在俺的示例代码中,俺设置了容器高度,以确保其高于图片。

/**
* 犀牛前端部落 https://www.pipipi.net/
**/
//HTML
<div class="verticalcenter">
    <img src="image.jpg" alt="centered image" />
</div>
//CSS
<style>
.verticalcenter {
    display: table-cell;
    height: 400px;
    vertical-align: middle;
}
</style>

水平垂直居中图片

我们可以组合水平和垂直对齐方式代码,示例代码如下:

/**
* 犀牛前端部落 https://www.pipipi.net/
**/
//HTML
<div class="verticalhorizontal">
    <img src="image.jpg" alt="centered image" />
</div>
//CSS
<style>
.verticalhorizontal {
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}
</style>

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3045.html

发表评论

登录后才能评论