元素不会保持居中，尤其是在调整屏幕大小时 [英] Element will not stay centered, especially when re-sizing screen

问题描述

我的问题是我无法将三角形指针水平居中.

My problem is that I cannot horizontally center a triangle pointer.

好吧，我可以针对某些窗口大小将指针居中，但是当我缩小或扩展窗口时，它又将其置于错误的位置.

Well, I can center the pointer for some window sizes, but when I shrink or extend the window it places it in the wrong place again.

我错过了什么?

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: 48%;
  transform: 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>

推荐答案

你的箭头以 left:48% 为中心.这将根据箭头元素的左边缘将箭头定位在靠近容器的中心.

You have your arrow centered with left:48%. This positions the arrow near the center of the container based on the arrow element's left edge.

换句话说，假设您使用了 left:50%(这是正确的方法)，这 不会 将箭头元素在容器中居中.它实际上使容器中元素的左边缘居中.

In other words, assume you used left:50% (which is the correct way to go), this doesn't center the arrow element in the container. It actually centers the left edge of the element in the container.

在下图中，使用text-align:center 将标记置于页面中央.

In the image below a marker is centered on the page using text-align:center.

要进行比较，请查看以 left:50% 为中心的箭头.

For comparison, see your arrow centered with left:50%.

该元素位于右中.随着窗口变小，这种错位变得更加明显.

The element is positioned center-right. This misalignment becomes more noticeable as the window gets smaller.

因此，通常会看到居中、绝对定位的元素使用 transform 属性:

As a result, it is common to see centered, absolutely positioned elements use the transform property:

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

transform 规则告诉三角形将自身向后移动其宽度的 50%.这使它完美地居中于线上.现在它模拟 text-align:center.

The transform rule tells the triangle to shift itself back by 50% of its width. This makes it perfectly centered on the line. Now it emulates text-align:center.

在 translate(-50%,0) 中，第一个值针对 x 轴(水平)，另一个适用于 y 轴.等效的规则是 transform:translateX(-50%)(还有 transform:translateY()).

In translate(-50%,0), the first value targets the x-axis (horizontal), the other applies to the y-axis. An equivalent rule would be transform:translateX(-50%) (there's also transform:translateY()).

顺便说一句，这里是如何将元素水平和居中垂直使用此方法:

As an aside, here's how to center an element both horizontally and vertically using this method:

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

注意:如果您使用 right: 50% 或 bottom: 50%，则相应的 translate 值为 <代码>50%(非负).

Note: If you were using right: 50% or bottom: 50%, the respective translate values would be 50% (not negative).

然而，在这个特定问题中，出现了一个问题，因为 transform:rotate(45deg) 也在声明块中.添加第二个 transform 意味着第一个被忽略(根据级联).

In this particular question, however, an issue arises because transform:rotate(45deg) is also in the declaration block. Adding a second transform means the first one is ignored (per the cascade).

所以，作为一个解决方案，试试这个:

So, as a solution, try this:

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

通过将函数链接在一起，可以应用多个函数.

By chaining functions together, multiple functions can be applied.

请注意顺序很重要.如果将 translate 和 rotate 反转，三角形将首先旋转 45 度，然后沿旋转轴移动 -50% ，从而破坏布局.因此，请确保 translate 首先进行.(感谢 @Oriol 在评论中指出这一点.)

Just note that order matters. If translate and rotate were reversed, the triangle would first rotate 45 degrees and then shift -50% along the rotated axis, breaking the layout. So make sure that translate goes first. (Thanks @Oriol for pointing this out in the comments.)

完整代码如下:

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>

这篇关于元素不会保持居中，尤其是在调整屏幕大小时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！