Rozmieszczenie flexbox

głosy
0

Próbuję ustawić jeden div w środku strony, a drugi do końca.

Mam to, ale nie jestem w stanie ustawić pierwszy na środku.

Próbowałem ustawienie innego Aling siebie do content_text ale żadna z rzeczy Próbowałem pracę.

Nadzieję, że chłopaki mogą mi pomóc. :)

html,body{
  height:100%;
  margin:0;
}

.content {
  align-items: center;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: space-between;
  position: absolute; /* Position the background text */
  width: 100%; /* Full width */
}

/* HELPERS */

.img-bg {
  display:block;
  height:100%;
  object-fit: cover;
  width:100%;
}
<!doctype html>
<html class=no-js lang=en dir=ltr>
  <head>
    <meta charset=utf-8>
    <meta http-equiv=x-ua-compatible content=ie=edge>
    <meta name=viewport content=width=device-width, initial-scale=1.0>
    <title>Iraitz Puente</title>
  </head>
  <body>
    <div class=row fullWidth>
      <div class=content>
        <div class=content_text>
          <h1>THIS MUST BE CENTERED</h1>
        </div>
        <div class=content_arrow>
          <h1>END</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Utwórz 18/12/2018 o 11:09
źródło użytkownik
W innych językach...                            


4 odpowiedzi

głosy
1

Jeśli ustawisz contentsię justify-content: flex-end;, wtedy można zastosować absolutepozycjonowanie na element, który wymaga centrowania, a następnie wyśrodkować go za pomocą kombinacji top: 50%i transform: translateY(-50%);:

html,body{
  height:100%;
  margin:0;
}

.content {
  align-items: center;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: flex-end;
  position: absolute; /* Position the background text */
  width: 100%; /* Full width */
}

.content_text {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

/* HELPERS */

.img-bg {
  display:block;
  height:100%;
  object-fit: cover;
  width:100%;
}
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iraitz Puente</title>
  </head>
  <body>
    <div class="row fullWidth">
      <div class="content">
        <div class="content_text">
          <h1>THIS MUST BE CENTERED</h1>
        </div>
        <div class="content_arrow">
          <h1>END</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Odpowiedział 18/12/2018 o 11:14
źródło użytkownik

głosy
0

html,body{
  height:100%;
  margin:0;
}

.content {
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  align-items: center;
  width: 100%; /* Full width */
}

/* HELPERS */

.img-bg {
  display:block;
  height:100%;
  object-fit: cover;
  width:100%;
}
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iraitz Puente</title>
  </head>
  <body>
    <div class="row fullWidth">
      <div class="content">
        <div class="content_text">
          <h1>THIS MUST BE CENTERED</h1>
        </div>
        <div class="content_arrow">
          <h1>END</h1>
        </div>
      </div>
    </div>
  </body>
</html>

Odpowiedział 18/12/2018 o 11:20
źródło użytkownik

głosy
0

po prostu usunąć position: absolutestyl z .content klasie

Odpowiedział 18/12/2018 o 11:15
źródło użytkownik

głosy
-2
<style>
.content {
    align-items: center;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
    position: absolute;
    width: 100%;
}
.contact .content_text,.contact .content_arrow{
    margin-top: auto;
}
</style>
Odpowiedział 18/12/2018 o 11:17
źródło użytkownik

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more