屏幕调整大小期间三角形指针水平居中遇到问题
问题陈述
用户打算水平居中三角形容器元素内的指针。虽然在某些窗口大小下成功,但调整窗口大小时指针会偏离对齐状态。
解决方案
了解问题:
最初尝试将指针向左居中:48% 根据其左边缘定位指针。这种方法没有考虑到元素的宽度,导致窗口大小变化时出现错位。
使用变换实现居中:
要使三角形正确居中,需要推荐使用变换属性:
1 2 3 4 5 | .triangle {
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
|
登录后复制
此规则将三角形的位置移动 50%它的宽度,有效地将其在容器内居中。
将变换与旋转相结合:
在这个特定场景中,三角形元素还有一个变换:rotate(45deg)应用。但是,CSS 级联规则会用第二个变换覆盖第一个变换,从而防止水平居中。
要解决此问题,请链接变换函数:
1 2 3 4 | .container::before {
left: 50%;
transform: translate(-50%,0) rotate(45deg);
}
|
登录后复制
多个变换函数可以一起使用,按列出的顺序申请。在这种情况下,首先应用翻译,然后应用旋转。
完整代码片段:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | body {
background: #333333;
}
.container {
width: 98%;
height: 80px;
line-height: 80px;
position: relative;
top: 20px;
min-width: 250px;
margin-top: 50px;
}
.container-decor {
border: 4px solid #C2E1F5;
color: #fff;
font-family: times;
font-size: 1.1em;
background: #88B7D5;
text-align: justify;
}
.container::before {
top: -33px;
left: 50%;
transform: translate(-50%,0) rotate(45deg);
position: absolute;
border: solid #C2E1F5;
border-width: 4px 0 0 4px;
background: #88B7D5;
content: '' ;
width: 56px;
height: 56px;
}
<div class = "container container-decor" >great distance</div>
|
登录后复制
以上是为什么我的水平居中三角形指针在调整大小时会发生移动?的详细内容。更多信息请关注PHP中文网其他相关文章!