Flexbox Positionierung

Question

Flexbox Positionierung

stimmen

0

Ich versuche, ein div in der Mitte der Seite und die anderen bis zum Ende zu positionieren.

Ich habe dies aber ich bin nicht in der Lage, die ersten auf der Mitte zu positionieren.

Ich habe versucht, verschiedene aling Selbst zum content_text Einstellung aber keinen der Sache, die ich Arbeit ausprobiert habe.

Hoffe, euch kann mir helfen. :)

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>

html css flexbox

Veröffentlicht am 18/12/2018 um 11:09
quelle vom benutzer Iraitz

In anderen Sprachen...

4 antworten

stimmen

0

entfernen Sie einfach den position: absoluteStil aus der Klasse .content

Beantwortet am 18/12/2018 um 11:15
quelle vom benutzer elraphty

stimmen

-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>

Beantwortet am 18/12/2018 um 11:17
quelle vom benutzer AddWeb Solution Pvt Ltd

stimmen

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>

Beantwortet am 18/12/2018 um 11:20
quelle vom benutzer elraphty

SWC · Accepted Answer · 2018-12-18 11:14

Wenn Sie das contentauf justify-content: flex-end;, dann können Sie sich bewerben absolutePositionierung auf das Element , das muss zentriert und dann eine Kombination der Verwendung von Zentrum top: 50%und 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>