Wie Bild zentrieren vertikal in div

Ich habe ein div hat eine Höhe von 100vh so, dass es immer auf die Höhe des browser-Bildschirms. In diesem div möchte ich ein Bild platzieren und zentrieren Sie es vertikal zu seinen Eltern.

Die Höhe ist variabel, also kann ich nicht mit festen Margen. Meine aktuelle Markup ist wie folgt:

HTML

   <div class="textportfolio">

      <h1>This is a title</h1>

      <p class="textbio-small">
      The Roosevelt dime is the current ten-cent piece of the United States.
      </p>

      <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">

   </div>

CSS:

.textportfolio {
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh;
}

img.portfolio-slides-img {
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block;
    }

Weiß jemand, wie um das Bild zu zentrieren vertikal entsprechend der browser-Höhe?

Hier ist das code-snippet

CSS:

.textportfolio {
    font-family: "Lora", serif;
    margin: 5%;
    background: #e9cca3;
    height: 100vh
}

img.portfolio-slides-img {
    margin-top: 15%;
    max-width: 40%;
    max-height: 40%;
    margin: 0 auto;
    display: block;
    }

HTML:

<div class="textportfolio">
  <h1>This is a title</h1>
  
  <p class="textbio-small">
  The Roosevelt dime is the current ten-cent piece of the United States.
  </p>
  
  <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
  
  </div>

haben Sie versuchen, position: absolute Standardtitel?
Es ist nicht ganz klar, was Sie sind nach. Das Bild soll zentriert sein und die Texte sitzen vertikal oben des zentriertes Bild oder versuchen Sie zu zentrieren Sie die ganze text - /Bild-combo?
Nur sollte das Bild vertikal zentriert innerhalb des (orange) für div.

InformationsquelleAutor Mike | 2017-09-18

14

Ich verwenden Sie dieses css-snippet:
```
.selector {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
```
Angewendet auf Ihr Beispiel: https://jsfiddle.net/nhdh8ycr/4/
- Dank Emaro, diese seemes perfekt funktionieren!
- Dieser arbeitete für mich, außer ich musste position: relative; statt.
InformationsquelleAutor Emaro
4

Zentrierung Dinge in CSS wurde ein lange diskutiertes Thema, wo die Menschen Wiegen alle der Faktoren und argumentieren, was die wenigsten gewundenen Weg ist.

Dann im Jahr 2014, so genannte Flexbox kam und im Grunde veraltet alles.

Wenn ein container hat display: flex gibt es Eigenschaften, um die Angleichung seiner Kinder. Und Sie können Anker in der Mitte auf beiden/beide Achsen.
```
<div id="container">
 <img src="https://i.imgur.com/i9xpVnQ.jpg" />
</div>
```
```
html, body {
  height: 100%; /* required to make body occupy the full viewport by default */
}

#container {
  height: 100%;
  display: flex;
  align-items: center; /* horizontal */
  justify-content: center; /* vertical */
}

img {
  height: 200px;
}
```
https://jsfiddle.net/5goboeey/1/

Es ist so ubiquitär bequem, ich denke, es geht weiter unter dem radar Fliegen, weil die Leute davon ausgehen, es ist gar nicht so einfach.

InformationsquelleAutor JackHasaKeyboard

vielleicht diese stackoverflow-Frage konnte dir helfen
jsfiddle

code ist
HTML

<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>

CSS

.frame {
height: 25px;      /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;

text-align: center; margin: 1em 0;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}

Dies funktioniert, da das div wo das Bild platziert wird ha eine Feste Höhe von 25px. Ich habe aber eine variable Höhe (browser-Fenster). Also nicht eine Lösung für mein problem.
Sie können es verwenden, in % Anteil .

InformationsquelleAutor Mubasher Iqbal

Versuchen Sie dies:

CSS:

.textportfolio {
  font-family: "Lora", serif;
  margin: 5%;
  background: #e9cca3;
  height: 100vh;
  position: relative;
}

img.portfolio-slides-img {
  max-width: 40%;
  max-height: 40%;
  margin: 0 auto;
  display: block;
  position: absolute;
  right: 0;
  left: 0;
  top: 35%
}

HTML:

<div class="textportfolio">
  <h1>This is a title</h1>

  <p class="textbio-small">
    The Roosevelt dime is the current ten-cent piece of the United States.
  </p>

  <img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">

</div>

InformationsquelleAutor vishnu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.