在网页设计中,常常需要对图片进行居中显示,让页面更加美观,让用户更容易阅读信息。而CSS就提供了几种方法可以实现图片居中,下面就简单介绍其中的三种方法。 方法一:textalign和display属性...
在网页设计中,常常需要对图片进行居中显示,让页面更加美观,让用户更容易阅读信息。而CSS就提供了几种方法可以实现图片居中,下面就简单介绍其中的三种方法。
方法一:text-align和display属性
使用该方法,需要将图片的外层元素设为块级元素,例如div。接着,使用text-align和display属性即可实现图片水平和垂直居中。
例如,以下代码将图片的外层元素设为
<div style="text-align: center; display: flex; align-items: center; justify-content: center;">
<img src="example.jpg" alt="示例图片">
</div>
<div style="text-align: center;">
<img src="example.jpg" alt="示例图片" style="margin: 0 auto;">
</div>
<div style="position: relative; top: 50%; transform: translateY(-50%); text-align: center;">
<img src="example.jpg" alt="示例图片">
</div>