html - descripcion - El elemento no permanecerá centrado, especialmente cuando se cambia el tamaño de la pantalla

meta title html

Question

Mi problema es que no puedo centrar horizontalmente un puntero de triángulo.

Bueno, puedo centrar el puntero para algunos tamaños de ventana, pero cuando encojo o extiendo la ventana, vuelve a colocarlo en el lugar equivocado.

¿Qué me estoy perdiendo?

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>

Answer 1

Podría utilizar potencialmente la nueva función CSS3 calc() que le permite hacer aritmética para descubrir el punto central.

Para obtener su punto central, el cálculo deberá ser:

50% - (56px / 2)

Entonces esto termina siendo

50% - 28px

Poniendo esto en la función de calc() debería resolverlo dentro del navegador y posicionarlo perfectamente en el centro.

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: calc(50% - 28px);
  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>

Answer 2

Tienes tu flecha centrada con la left:48% . Esto posiciona la flecha cerca del centro del contenedor según el borde izquierdo del elemento de flecha.

En otras palabras, suponga que utilizó left:50% (que es la forma correcta de ir), esto no centra el elemento de flecha en el contenedor. En realidad centra el borde izquierdo del elemento en el contenedor.

En la imagen a continuación, un marcador se centra en la página usando text-align:center .

Para comparar, vea su flecha centrada con la left:50% .

El elemento está posicionado centro-derecha. Esta desalineación se vuelve más notable a medida que la ventana se hace más pequeña.

Como resultado, es común ver elementos centrados y absolutamente posicionados que usan la propiedad de transform :

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

La regla de transform le dice al triángulo que retroceda un 50% de su ancho. Esto lo hace perfectamente centrado en la línea. Ahora emula text-align:center .

En translate(-50%,0) , el primer valor se dirige al eje x (horizontal), el otro se aplica al eje y. Una regla equivalente sería transform:translateX(-50%) (también hay transform:translateY() ).

Como un aparte, he aquí cómo centrar un elemento tanto horizontal como verticalmente usando este método:

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

Nota: Si estaba usando right: 50% o bottom: 50% , los respectivos valores de translate serían 50% (no negativos) .

En esta pregunta en particular, sin embargo, surge un problema porque transform:rotate(45deg) también está en el bloque de declaración. Agregar una segunda transform significa que la primera se ignora (según la cascada).

Entonces, como solución, intente esto:

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

Al encadenar funciones juntas, se pueden aplicar múltiples funciones.

Solo tenga en cuenta que el orden importa. Si se invierten la función de translate y rotate , el triángulo primero giraría 45 grados y luego cambiaría -50% a lo largo del eje rotado , rompiendo el diseño. Así que asegúrese de que el translate va primero. (Gracias @Oriol por señalar esto en los comentarios).

Aquí está el código completo:

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