为什么我的水平居中三角形指针在调整大小时会发生移动？-css教程-PHP中文网

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

DDD

发布： 2024-12-21 12:52:10

原创

558 人浏览过

Why Does My Horizontally Centered Triangle Pointer Shift During Resizing?

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

问题陈述

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

解决方案

了解问题：

最初尝试将指针向左居中：48% 根据其左边缘定位指针。这种方法没有考虑到元素的宽度，导致窗口大小变化时出现错位。

使用变换实现居中：

要使三角形正确居中，需要推荐使用变换属性：

.triangle {
   position: absolute;
   left: 50%;
   transform: translate(-50%,0);
}

登录后复制

此规则将三角形的位置移动 50%它的宽度，有效地将其在容器内居中。

将变换与旋转相结合：

在这个特定场景中，三角形元素还有一个变换：rotate(45deg)应用。但是，CSS 级联规则会用第二个变换覆盖第一个变换，从而防止水平居中。

要解决此问题，请链接变换函数：

.container::before {
    left: 50%;
    transform: translate(-50%,0) rotate(45deg);
}

登录后复制

多个变换函数可以一起使用，按列出的顺序申请。在这种情况下，首先应用翻译，然后应用旋转。

完整代码片段：

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中文网其他相关文章！