Hvorfor align: center i morselskapet rotet opp min stilling: absolutte overlegg?

Question

Hvorfor align: center i morselskapet rotet opp min stilling: absolutte overlegg?

stemmer

0

Kan noen forklare hvorfor du bruker display: flex; align: center;i den overordnede av denne menyen messes opp de to absolutt plassert overlegg i et barn element?

Her er en fele der du kan prøve det med og uten align: centerå få min mening. (uncomment / * Justering: center; * / i .Menyen)

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>

css css3 flexbox css-position

Publisert på 02/09/2018 klokken 05:45
kilden bruker Hastig Zusammenstellen

På andre språk...

1 svar

Temani Afif · Answer 1 · 2018-09-02 09:10

Ettersom midtelementet kun inneholder absolutt elementer slik at det ikke er noen innstrømning innholdet inne i den for å definere dens høyde. Deretter standard align-itemser strekningen slik at elementet vil bli strukket som standard, og høyden vil være lik den overordnede høyde, men hvis du endrer justeringen elementet vil vurdere innholdet å definere høyde og siden det ingen i-flow element vil det ha height:0noe som betyr at fremdriftslinjen definert av top:0;bottom:0vil også ha høyde 0.

For å unngå dette, må i det minste ett av elementet ikke positoned (den som inneholder teksten), slik at det midtre element har noen innstrømning innhold og dens høyde vil være forskjellig fra 0whataver justeringen vil være.

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;
  z-index:0;
  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;
  z-index:-1;
  top: 0;
  bottom: 0;
  left: 0;
  width: 83%;
  background-color: hsla(191, 58%, 46%, 1);
}

.progress-value {
  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>