图片的居中定位和按钮定位

最新推荐文章于 2023-12-07 15:16:34 发布

原创最新推荐文章于 2023-12-07 15:16:34 发布 · 2.8k 阅读

5 ·

CC 4.0 BY-SA版权

要求：

div 中一张图片，需要让这张图片的中心部分始置于这个div的中间。两边超出部分隐藏。

代码实现：

div{
    img {
        margin-left: 50%; /*相对父元素*/
        transform：translateX(-50%);/* 相对自身宽*/
    }
}

button 定位到一张图片上

当设计给的是一张大图，上面的按钮不能通过CSS实现，只能使用设计给的图时，这时需要在这张大图上进行链接button的定位。

方法：不要做背景，对图片进行切割，从按钮的上边部分进行切割，上面的部分成为一个 img 标签，下面的部分成为一个img，这样对 button 进行定位的时候始终设置 top 值为0。

单位的选择：使用百分比肯定是不行的，当页面变大或者变小的时候，或者是页面缩放的时候必然会出现定位不准的问题。

所以当 top 值设置为0后，只需要设置左右的距离就行。首先先将按钮居中，这很好实现。

如果有多个按钮，那么先将他们居中，再通过一个固定的 margin-left/right 值（前提：图片不会进行缩放，始终显示中间的部分。如果图片宽度会进行缩放，那么只能使用百分比定位）进行相对定位，这样在页面缩放或者变大变小的时候页面定位不会乱。

TODO：纯 CSS2 的方式实现图片的居中

https://aiezu.com/article/img_overflow_center_css_js.html

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.demo-box { position:relative; width:200px;height:200px; overflow:hidden;}
.demo-box  p { position:absolute;top:50%;left:50%;margin:0;padding:0; }
.demo-box img { position:absolute;top:-50%;left:-50%;display:block; } // 相对父元素，但是父元素和自己宽高一致。这里其实相对于自己
.demo-box img.hide { visibility:hidden;position:static; } 
</style>
</head>

<body>
<div class="demo-box">
  <p>
     <img class="hide" src="images/400x200.jpg"/>// 撑开p标签，使得和图片具有相同宽高，但是不显示
     <img src="images/400x200.jpg"/> 
  </p>
</div>

</body>
</html>