首页 > web前端 > css教程 > 为什么我的水平居中三角形指针在调整大小时会发生移动?

为什么我的水平居中三角形指针在调整大小时会发生移动?

DDD
发布: 2024-12-21 12:52:10
原创
606 人浏览过

Why Does My Horizontally Centered Triangle Pointer Shift During Resizing?

屏幕调整大小期间三角形指针水平居中遇到问题

问题陈述

用户打算水平居中三角形容器元素内的指针。虽然在某些窗口大小下成功,但调整窗口大小时指针会偏离对齐状态。

解决方案

了解问题:

最初尝试将指针向左居中: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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板