Ich habe eine div mit zwei Bildern und einem h1 . Alle müssen innerhalb des Divs vertikal nebeneinander ausgerichtet sein.
Eines der Bilder muss sein absolute positioniert innerhalb der div .
Welches CSS ist erforderlich, damit dies auf allen gängigen Browsern funktioniert?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Ich habe einen neuen Workaround gefunden, um mehrere Textzeilen in einem div mit CSS 3 vertikal auszurichten (und ich bin auch mit Bootstrap v3 Grid-System, um die UI zu verschönern), die wie unten ist:
.immediate-parent-of-text-containing-div {
height: 50px; /* Or any fixed height that suits you. */
}
.text-containing-div {
display: inline-grid;
align-items: center;
text-align: center;
height: 100%;
}Nach meinem Verständnis muss das unmittelbare übergeordnete Element des texthaltigen Elements eine gewisse Höhe haben.
Wir können eine CSS-Funktionsberechnung verwenden, um die Größe des Elements zu berechnen und dann das untergeordnete Element entsprechend zu positionieren.
Beispiel HTML:
<div class="box">
<span><a href="#">Some Text</a></span>
</div>Und CSS:
.box {
display: block;
background: #60D3E8;
position: relative;
width: 300px;
height: 200px;
text-align: center;
}
.box span {
font: bold 20px/20px 'source code pro', sans-serif;
position: absolute;
left: 0;
right: 0;
top: calc(50% - 10px);
}
a {
color: white;
text-decoration: none;
}Demo hier erstellt: https://jsfiddle.net/xnjq1t22/
Diese Lösung funktioniert gut mit responsiven div height y width auch.
Anmerkung: Die kalkulieren Funktion ist nicht auf Kompatibilität mit alten Browsern getestet.
Nur eine Bootstrap-Klasse verwenden:
class="container d-flex"Element innerhalb von div: class="m-auto"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container d-flex mt-5" style="height:110px; background-color: #333;"> <h2 class="m-auto"><a href="https://hovermind.com/">HVERMND</a></h2> </div>
Standardmäßig ist h1 ein Blockelement und wird in der Zeile nach dem ersten Bild gerendert, und das zweite Bild wird in der Zeile nach dem Block angezeigt.
Um dies zu verhindern, können Sie für h1 ein Inline-Flow-Verhalten einstellen:
#header > h1 { display: inline; }Was die absolute Positionierung des img innerhalb des div müssen Sie das enthaltende Div so einstellen, dass es eine "bekannte Größe" hat, bevor dies richtig funktioniert. Meiner Erfahrung nach müssen Sie auch die Position Attribut weg von der Standard - Position ändern: relativ funktioniert für mich:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }Wenn Sie das hinbekommen, können Sie versuchen, nach und nach die Attribute height, width, position aus div.header zu entfernen, um die minimal erforderlichen Attribute zu erhalten, um den gewünschten Effekt zu erzielen.
UPDATE:
Hier ist ein vollständiges Beispiel, das mit Firefox 3 funktioniert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
Meine neue Lieblingsmethode dafür ist ein CSS-Gitter:
/* technique */
.wrapper {
display: inline-grid;
grid-auto-flow: column;
align-items: center;
justify-content: center;
}
/* visual emphasis */
.wrapper {
border: 1px solid red;
height: 180px;
width: 400px;
}
img {
width: 100px;
height: 80px;
background: #fafafa;
}
img:nth-child(2) {
height: 120px;
}
<div class="wrapper">
<img src="https://source.unsplash.com/random/100x80/?bear">
<img src="https://source.unsplash.com/random/100x120/?lion">
<img src="https://source.unsplash.com/random/100x80/?tiger">
</div> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
23 Stimmen
Ich habe eine Liste mit allen Möglichkeiten der vertikalen Ausrichtung erstellt, die ich hier hinterlasse: jsfiddle.net/techsin/FAwku/1
3 Stimmen
Hier sind zwei einfache Methoden, um ein Element innerhalb eines div zu zentrieren, vertikal, horizontal oder beides (reines CSS): stackoverflow.com/a/31977476/3597276
1 Stimmen
Margin-top: auto und margin-bottom: auto (funktioniert in vielen Fällen).