关于定位position的一些方法.设置position又想居中？

最新推荐文章于 2024-06-28 22:16:43 发布
最新推荐文章于 2024-06-28 22:16:43 发布
阅读量9.1k 收藏
点赞数
分类专栏： 前端小知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33769914/article/details/78415956
版权
本文介绍了如何使用CSS position属性实现商品图片的居中展示，特别是对于不规则图片的处理方法。通过设置background-position、background-size、left、top等属性，结合负margin和百分比宽度，调整元素的位置，以达到理想的布局效果。
摘要由CSDN通过智能技术生成


这是效果图。我们看到商品的图片不是规则的。

你常规的切图是方形我们的做法是：把整条行的图片切出来作为背景图。在上面写两个a标签。

<div class="phoneDiv">
<div class="wid">
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59938.html" target="_blank" class="posa"></a>
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59944.html" target="_blank" class="posa2"></a>
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59958.html" target="_blank" class="posa3"></a>
    <a href="http://www.lishe.cn/shop.php/Info/index/itemId/59945.html" target="_blank" class="posa4">&l

最低0.47元/天 解锁文章
肖肖肖丽珠
关注
专栏目录
css3 position fixed固定居中问题解决方案
12-13
通常，我们要让某元素居中，会这样做： 复制代码代码如下:#element{ margin:0 auto; } 如果还想让此元素位置固定呢？一般我们会添加position:fixed，如下： 复制代码代码如下: #element{ position:fixed; margin:0 ...
html css+div 万能的position居中方法
inrtyx的专栏
12-18 1821
首先给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去，写上子元素的height和width。接着就是整个方法的核心，给子元素再打上top:50%;left:50%以及margin-top:一半的height值的的负数;margin-left:一半的weight值的负数。整理一下之后，可能你会给你的子元素写上这
使用定位position实现元素居中
里昂的博客
10-24 4348
在使用绝对定位时要想实现水平居中，可以按照下图的方法： left: 50%;：让盒子的左侧移动到父级元素的水平中心位置； margin-left: -100px;：让盒子向左移动自身宽度的一半。 垂直居中同上 ...
使用绝对定位 position:absoult 所需要的知识点，以及 position 的简单介绍
最新发布
qq_52530691的博客
06-28 2734
CSS position 属性用于指定元素在页面中的定位方式，top 与 bottom,left 和 right 四个属性用于确定元素在页面中的具体位置。的属性值有五个，分别是： static，relative ，absolute ，fixed ，stickystatic： 该关键字指定元素的正常布局行为，并且他不受 top ，bottom，left，right 的影响，一般被称为静态定位。relative: 相对定位元素的定位是相对其 没有添加 position 属性的 位置。
position定位属性 以及 元素居中方式
m0_51328823的博客
01-07 2663
定位属性position 在css中比较重要的便是position和float。 定位是将盒子定在某一个位置自由的漂浮在其他盒子的上面 定位的语法 定位=定位模式+边偏移(left right top bottom) 定位的属性值 1.静态定位 position: static; 相当于没有定位 设置边偏移无效 2.相对定位 position: relative; 1.相对于 自己原来在标准流中位置来移动的 2.不脱标(继续占有原来的位置，后面的盒子仍然以标准流的方式对待它) 3.绝对定
position的4种定位以及居中的2种方法。
热门推荐
tjh1998的博客
02-26 2万+
参考文章：https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 1.z-index设置元素在垂直于显示屏（z轴方向上）的堆叠顺序，值大的元素发生重叠时会盖在值小的上面。 2.正常流（常规流）不会受到top，right,left,bottom的影响。 例如： &amp;amp;lt;!doctype html&amp;amp;gt; &amp;amp;lt;html lang=&amp;quot;en&amp;quot
善于利用postion让元素居中
qq_43390061的博客
03-05 955
我们都知道文字和行内块级元素（可以理解为即支持宽高的行内元素或不独占一行的块级元素）可以直接使用父级的text-align:cente水平r居中。但是怎么让块级元素水平居中，垂直居中这是一个值得思考的问题，其实有很多实际的项目里面经常需要用到垂直居中，所以我今天教小白们一个简单实用的方法。 我们知道position有5个值，其中的absolute用来绝对定位的（相对于position:relati...
css中position:fixed实现div居中上下左右居中
09-25
在这段CSS代码中，首先设置了.dialog类的position属性为fixed，确保该DIV相对于视口定位。接着，通过设置top: 50%和left: 50%属性，将DIV元素的左上角定位到视口的中心位置。然后，通过设置margin负值来调整DIV元素...
CSS中position属性之fixed实现div居中
09-03
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素如何在页面上定位。`position`属性有多个值，如`static`、`relative`、`absolute`和`fixed`，每种都有其特定的用途。在这个场景中，我们主要关注的是...
如何用float配合position:relative实现居中
12-07
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数，程序那边根据循环实现放几个切换的按钮，但是按钮相对于整体的要居中，刚开始想着用display:inline-block;实现，但是ie6和ie7对块元素使用这个...
定位、元素垂直水平居中的方法
hello world
05-07 1636
static：默认值，无特殊定位1.相对定位 position:relative;参考点:原来的位置;原来的位置仍然占位,不脱流;2.绝对定位 position:absolute;参考点:带有定位的最近一级的父元素,都没有定位,以html为参考点;原来的位置不占位,脱流;3.固定定位 position:fixed;参考点:浏览器的可视窗口(浏览器的四条边);原来的位置不占位,脱流;4.粘性定位 position:sticky;(兼容性差)
手机端的居中对齐的方式
weixin_34268310的博客
11-03 290
1 利用position:absolute .center{ 　　position: absolute; 　　top: 0; 　　left: 0; 　　bottom: 0; 　　right: 0; 　　margin:auto; 　　width: 50vw; ...
设置定位后position:fixed后,发现原先的盒子不居中了怎么办
Wei0217的博客
05-07 208
定位后，盒子不再处于文档流中，不再受到文档流的影响，因此原本使用传统居中方式（如 margin: 0 auto;）来实现居中的方法可能不再适用。这种方法会将盒子的左边缘移动到父容器的水平中心点，实现水平居中的效果。这种方法会将盒子的顶部移动到父容器的垂直中心点，实现垂直居中的效果。
弹出框上下左右都居中
weixin_41813243的博客
03-10 426
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>弹出居中</title> <metaname="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=n...
Vue中样式实现居中
geidongdong的博客
12-05 8289
我们经常用margin:0 auto来实现水平居中，而一直认为margin:auto不能实现垂直居中……实际上，实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 最近使用了这个效果，转载于： https://www.cnblogs.com/doseoer/p/4581284.html ...
实现垂直/水平居中 （4种）
不想写博客
09-08 513
实现垂直/水平居中 （4种）
元素水平垂直居中的几种方法
赵佳敏的博客
11-08 2582
目录 一、水平居中 1.行内元素水平居中 （1）父元素是块级元素 （2）父元素不是块级元素 2.块级元素水平居中 （1）已知块级元素的宽度和高度 （2）未知块级元素的宽度和高度 （3）使用定位属性（父相子绝） （4）使用flexbox布局实现（宽度确不确定都可以） 二、垂直居中 1.单行的行内元素垂直居中 2.多行的行内元素垂直居中 3.块级元素垂直居中 (1)使用定位属性（父相子绝） (2)使用flexbox布局实现（宽度确不确定都可以） 三、块级元素水平+垂直居中 1.
position设置relative后又想让他居中如何设置
07-13
若想将相对定位的元素在其父元素中居中，可以使用以下步骤： 1. 将父元素设置为相对定位（position: relative）。 2. 将子元素设置为相对定位（position: relative）。 3. 使用以下 CSS 属性将子元素居中： - left: 50%：将子元素的左边距设置为父元素宽度的一半。 - top: 50%：将子元素的上边距设置为父元素高度的一半。 - transform: translate(-50%, -50%)：使用 transform 属性将子元素向左和向上移动自身宽度和高度的一半，从而实现居中效果。 下面是一个示例代码： ```css .parent { position: relative; } .child { position: relative; left: 50%; top: 50%; transform: translate(-50%, -50%); } ``` 请注意，这种方法适用于已知子元素的宽度和高度。如果子元素具有动态内容或未知尺寸，可能需要使用其他方法来实现居中效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值