CSS可以很方便的控制图片的位置,这让我们的页面在美观性和可读性上都能得到提升。下面是一些常用的方法。
/*水平居中*/ img{ display: block; margin: auto; } /*左对齐*/ img{ float: left; margin-right: 10px; } /*右对齐*/ img{ float: right; margin-left: 10px; } /*绝对定位*/ img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*相对定位*/ .container{ position: relative; } .container img{ position: absolute; top: 0; left: 0; } /*居中垂直对齐*/ .container{ display: flex; justify-content: center; align-items: center; } .container img{ max-width: 100%; max-height: 100%; }
以上就是常用的图片位置控制方法。我们可以根据实际需求选择适合自己的方法,让我们的页面更加美观、舒适。