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

问题描述

我的问题是，我不能水平居中一个三角形指针。

好，我可以将指针放在一些窗口大小的中心，但是当收缩或扩展窗口

  body {background：＃333333;}。container {width：98％; height：80px; line-height：80px;位置：相对; top：20px; min-width：250px; margin-top：50px;}。container-decor {border：4px solid＃C2E1F5; color：#fff; font-family：times; font-size：1.1em;背景：＃88B7D5; text-align：justify;}。container：before {top：-33px;左：48％; transform：rotate（45deg）; position：absolute; border：solid＃C2E1F5; border-width：4px 0 0 4px;背景：＃88B7D5; content：''; width：56px; height：56px;}  

 < div class = container-decor>大距离< / div>  

解决方案

您的箭头以 left：48％为中心。

换句话说，假设您使用 left：50％（这是正确的方式），此不会使容器中的arrow元素居中。它实际上将容器中元素的左边缘居中。

在下面的图片中，使用 text-align：center 在页面上居中一个标记。

如需比较，请参阅以 left：50％为中心的箭头。

元素位于中间右侧。

因此，通常看到中心绝对定位的元素使用 transform 属性：

  .triangle {
 position：absolute; 
 left：50％; 
 transform：translate（-50％，0）; 
} 
  

transform 告诉三角形将自身向后移动其宽度的50％。这使它完全集中在线上。现在，它模拟 text-align：center 。

在 translate（-50％，0）中，第一个值定位x轴其他适用于y轴。一个等效的规则是 transform：translateX（-50％）（还有 transform：translateY（））。 / p>

下面介绍如何使用此方法垂直居中元素：

  .triangle {
 position：absolute; 
 left：50％; 
 top：50％; 
 transform：translate（-50％， -  50％）; 
} 
  

注意：如果您使用 ：50％或 bottom：50％，相应的 translate 值将为<$

在此特定问题中，然而，出现一个问题，因为 transform：rotate（45deg）也在声明块中。添加第二个转换意味着第一个被忽略（按级联）。

请尝试：

  .container :: before {
 left：50％; 
 transform：translate（-50％，0）rotate（45deg）; 
} 
  

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

请注意，订单很重要。如果 translate 和 rotate 被颠倒，则三角形首先旋转45度，然后沿-50％旋转轴，打破布局。因此，请确保 translate 先行。 （感谢 @Oriol 在评论中指出这一点。）

以下是完整代码：

  body {background：＃333333;} .container {width：98％; height：80px; line-height：80px;位置：相对; top：20px; min-width：250px; margin-top：50px;}。container-decor {border：4px solid＃C2E1F5; color：#fff; font-family：times; font-size：1.1em;背景：＃88B7D5; text-align：justify;}。container :: before {top：-33px;左：50％; transform：translate（-50％，0）rotate（45deg）; position：absolute; border：solid＃C2E1F5; border-width：4px 0 0 4px;背景：＃88B7D5; content：''; width：56px; height：56px;}  

 < div class = container-decor>大距离< / div>  

a href =https://jsfiddle.net/tt9opef6/ =nofollow noreferrer> jsFiddle

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.

What am I missing?

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>

解决方案

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.

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.

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

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.

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);
}

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.

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%);
}

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

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.

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.)

Here's the full code:

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>

jsFiddle

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