Aquí podría ser tu PUBLICIDAD


¿Por qué align: center en el lío padre hasta mi posición: superposiciones absolutos?

votos
0

Alguien podría explicar por qué el uso display: flex; align: center;de la matriz de este menú puede confundir las dos superposiciones de posición absoluta en un elemento hijo?

He aquí un violín, donde se puede probar con y sin align: centerconseguir mi significado. (uncomment / * align: center; * / en .menu)

https://jsfiddle.net/Hastig/wmtr87gc/

body { background-color: gray;}
.menu {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    width: 100%;
    padding: 5px 0;
    background-color: hsl(0, 0%, 30%);
}
.menu-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  font-size: 13px;
  color: hsl(0, 0%, 70%);
}
.menu-item.progress {
  background-color: gray;
}
.progress-bar {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 83%;
  background-color: hsla(191, 58%, 46%, 1);
}
.progress-value {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: hsl(0, 0%, 90%);
}
<div class=menu>
  <div class=menu-item>Stuff</div>
  <div class=menu-item progress>
    <div class=progress-bar></div>
    <div class=progress-value>83</div>
  </div>
  <div class=menu-item>Things</div>
</div>

Publicado el 02/09/2018 a las 05:45
fuente por usuario Hastig Zusammenstellen
En otros idiomas...        العربية       


Aquí podría ser tu PUBLICIDAD