zentrieren Sie ein Bild und legen Sie ein div darunter

Question

Ich habe zwei Fragen. Im Wesentlichen möchte ich ein Bild in seiner ursprünglichen Größe anzeigen und es in der Mitte des Bildschirms platzieren (mit der Mitte ich meine in der "horizontalen" Mitte nicht die Mitte des Bildschirms), und legen Sie dann ein Div mit Texten direkt darunter Bild. Dies ist der Code, den ich verwenden:

<div class="figure">; 
<img src="...">; 
</div>'; 
<div class="text"> 
text here 
</div> 

Dies ist die CSS:

.figure{ 
position:absolute; 
margin:0 auto; 
left:0; 
right:0; 
bottom:10px; 
top:30px; 
} 

.figure img{ 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    height:100%; 
    width:100%； 
} 

ich zwei Fragen haben. Die erste ist, wenn die Bildhöhe theoretisch länger ist als die Bildschirmhöhe, es gibt keine vertikale Bildlaufleiste, das Bild wurde gerade so skaliert, dass es auf den Bildschirm passt. Die zweite Frage ist, wie kann ich den Text unterhalb des Bildes platzieren, ohne die Größe des Bildes zu kennen? Ich habe versucht, figcaption, aber es funktioniert nicht.

Answer 1

Um es perfekt in die Mitte zu bringen, benötigen Sie möglicherweise min-height: 100vh; und min-width: 100vw; dann verwenden Sie Display Flex, um es zu zentrieren. Andernfalls könnten Sie es nicht vertikal zentrieren.

Verschieben Sie auch Ihren Textblock innerhalb eines div mit dem IMG.

Standardmäßig wird die Größe des IMG nicht geändert, es sei denn, Sie geben es an.

Standardmäßig div hat Display-Block, so dass es die ganze Zeile, mit text-align: center; wird es nur Ihren Text zentrieren.

.figure { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 100vh; 
 
    min-width: 100vw; 
 
} 
 

 
.centered { 
 
    text-align: center; 
 
} 
 

 
html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
}

<div class="figure"> 
 
    <div> 
 
    <img src="http://placehold.it/950x450"> 
 
    <div class="centered"> 
 
     text here 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Zunächst einmal nehme ich an, dass dies das tut, was Sie im Sinn haben.

html

<img src="https://static.tumblr.com/07f1e3ffdfdd03631d00e7792ea3fa93/mja6mxp/AUUna8jev/tumblr_static_tumblr_static_88o50pnpc3k04gw0ck888o80o_640.jpg"/> 
<div class="text">Isn't that pretty!</div> 

CSS

body { 
    color: #eee; 
background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); 
} 

img { 
margin: 0 auto; 
display: block; 
} 

.text { 
margin: 0 auto; 
display: table; 
} 

Ihre erste Frage, warum das Bild angepasst wird, wenn es als die Seite größer ist. Ich muss darauf hinweisen, dass Sie in Ihrem CSS das Bild so eingestellt haben, dass es 100% der möglichen Breite und Höhe entspricht, und dass die Bilder standardmäßig so gestreckt werden, dass sie auf das Element passen.

Um Ihre zweite Frage zu beantworten, weil Ihr "figure" div, das die img-Position enthält, absolut ist, ignoriert es die Position anderer Elemente. Ändern Sie die Position in einen anderen Typ, z. B. "position: relative", und sie positioniert sich mit anderen Elementen.

Ich bin nicht das sicherste in html und css Fähigkeiten, aber ich hoffe, meine zwei Cent hilft Ihnen zumindest vorwärts zu drücken.