html - imagen - Mantenga el elemento central centrado cuando los elementos laterales tengan anchos diferentes

title label html

Question

Imagine el siguiente diseño, donde los puntos representan el espacio entre los cuadros:

[Left box]......[Center box]......[Right box]

Cuando elimino el cuadro derecho, me gusta que el cuadro central todavía esté en el centro, así:

[Left box]......[Center box].................

Lo mismo ocurre si quitara el cuadro de la izquierda.

................[Center box].................

Ahora, cuando el contenido dentro del recuadro central se alargue, ocupará tanto espacio disponible como sea necesario mientras permanece centrado. Los cuadros izquierdo y derecho nunca se encogerán y, por lo tanto, cuando no quede espacio, el overflow:hidden y text-overflow: ellipsis entrarán en vigencia para romper el contenido;

[Left box][Center boxxxxxxxxxxxxx][Right box]

Todo lo anterior es mi situación ideal, pero no tengo idea de cómo lograr este efecto. Porque cuando creo una estructura flexible así:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

Si los cuadros izquierdo y derecho fueran exactamente del mismo tamaño, obtendré el efecto deseado. Sin embargo, cuando uno de los dos es de un tamaño diferente, el cuadro centrado ya no está realmente centrado.

¿Hay alguien que pueda ayudarme?

Actualizar

Un justify-self sería bueno, esto sería ideal:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

Answer 1

Si los cuadros izquierdo y derecho fueran exactamente del mismo tamaño, obtendré el efecto deseado. Sin embargo, cuando uno de los dos tiene un tamaño diferente, el cuadro centrado ya no está realmente centrado. ¿Hay alguien que pueda ayudarme?

Aquí hay un método que usa flexbox para centrar el elemento del medio, independientemente del ancho de los hermanos.

Características clave:

• CSS puro
• sin posicionamiento absoluto
• no JS / jQuery

Utilice contenedores flexibles anidados y márgenes auto :

.container {
  display: flex;
}
.box {
  flex: 1;
  display: flex;
  justify-content: center;
}

.box:first-child > span { margin-right: auto; }

.box:last-child  > span { margin-left: auto;  }

/* non-essential */
.box {
  align-items: center;
  border: 1px solid #ccc;
  background-color: lightgreen;
  height: 40px;
}
p {
  text-align: center;
  margin: 5px 0 0 0;
}

<div class="container">
  <div class="box"><span>short text</span></div>
  <div class="box"><span>centered text</span></div>
  <div class="box"><span>loooooooooooooooong text</span></div>
</div>
<p>&#8593;<br>true center</p>

Así es como funciona:

• El div de nivel superior ( .container ) es un contenedor flexible.
• Cada elemento secundario div ( .box ) ahora es un elemento flexible.
• Cada elemento .box recibe flex: 1 para distribuir el espacio del contenedor por igual ( más detalles ).
• Ahora los elementos están consumiendo todo el espacio en la fila y tienen el mismo ancho.
• Convierta cada elemento en un contenedor flexible (anidado) y agregue justify-content: center .
• Ahora cada elemento span es un elemento flexible centrado.
• Utilice los márgenes auto flexibles para desplazar el span exterior hacia la izquierda y hacia la derecha.

También puede renunciar a justify-content y usar márgenes auto exclusivamente.

Pero justify-content puede funcionar aquí porque los márgenes auto siempre tienen prioridad.

8.1. Alineándose con márgenes auto

Antes de la alineación a través de justify-content y align-self , cualquier espacio libre positivo se distribuye a los márgenes automáticos en esa dimensión.

Answer 2

1. Use tres artículos flexibles en el contenedor
2. Establecer flex: 1 al primero y al último. Esto los hace crecer igualmente para llenar el espacio disponible dejado por el medio.
3. Por lo tanto, el del medio tenderá a estar centrado.

4. Sin embargo, si el primer o el último elemento tiene un contenido amplio, ese elemento flexible también crecerá debido al nuevo min-width: auto valor inicial min-width: auto .

   Nota Chrome no parece implementar esto correctamente. Sin embargo, puede establecer min-width en -webkit-max-content o -webkit-min-content y también funcionará.

5. Solo en ese caso el elemento del medio será empujado fuera del centro.

.outer-wrapper {
  display: flex;
}
.item {
  background: lime;
  margin: 5px;
}
.left.inner-wrapper, .right.inner-wrapper {
  flex: 1;
  display: flex;
  min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.right.inner-wrapper {
  justify-content: flex-end;
}
.animate {
  animation: anim 5s infinite alternate;
}
@keyframes anim {
  from { min-width: 0 }
  to { min-width: 100vw; }
}

<div class="outer-wrapper">
  <div class="left inner-wrapper">
    <div class="item animate">Left</div>
  </div>
  <div class="center inner-wrapper">
    <div class="item">Center</div>
  </div>
  <div class="right inner-wrapper">
    <div class="item">Right</div>
  </div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item animate">Center</div></div><div class="right inner-wrapper"><div class="item">Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">Left</div></div><div class="center inner-wrapper"><div class="item">Center</div></div><div class="right inner-wrapper"><div class="item animate">Right</div></div></div>

Answer 3

En lugar de usar de manera predeterminada el uso de flexbox, el uso de la cuadrícula lo resuelve en 2 líneas de CSS sin marcado adicional dentro de los elementos secundarios de nivel superior.

HTML:

<header class="header">
  <div class="left">variable content</div>
  <div class="middle">variable content</div>
  <div class="right">variable content which happens to be very long</div>
</header>

CSS:

.header {
  display: grid;
  grid-template-columns: [first] 20% auto [last] 20%;
}
.middle {
  /* use either */
  margin: 0 auto;
  /* or */
  text-align: center;
}

Flexbox es genial, pero no debería ser la respuesta para todo. En este caso, la cuadrícula es claramente la opción más limpia.

Incluso hizo un codepen para su placer de prueba: https://codepen.io/anon/pen/mooQOV

Answer 4

Puedes hacer esto así:

.bar {
    display: flex;    
    background: #B0BEC5;
}
.l {
    width: 50%;
    flex-shrink: 1;
    display: flex;
}
.l-content {
    background: #9C27B0;
}
.m { 
    flex-shrink: 0;
}
.m-content {    
    text-align: center;
    background: #2196F3;
}
.r {
    width: 50%;
    flex-shrink: 1;
    display: flex;
    flex-direction: row-reverse;
}
.r-content { 
    background: #E91E63;
}

<div class="bar">
    <div class="l">
        <div class="l-content">This is really long content.  More content.  So much content.</div>
    </div>
    <div class="m">
        <div class="m-content">This will always be in the center.</div>
    </div>
    <div class="r">
        <div class="r-content">This is short.</div>
    </div>
</div>