Wie kann man ein Bild innerhalb einer enthaltenden div
ausrichten?
In meinem Beispiel muss ich den <img>
im <div>
mit class ="frame
"vertikal zentrieren:
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
Die Höhe von .frame
ist fest und die Bildhöhe ist unbekannt. Ich kann neue Elemente in .frame
hinzufügen, wenn dies die einzige Lösung ist. Ich versuche dies auf IE≥7, Webkit, Gecko zu tun.
Siehe jsfiddle hier
.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;
}
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=15 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=13 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=11 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=9 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=7 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=5 />
</div>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=3 />
</div>
Die einzige (und die beste Cross-Browser) Methode ist, wie ich weiß, die Verwendung eines inline-block
-Helpers mit height: 100%
und vertical-align: middle
für beide Elemente.
Es gibt also eine Lösung: http://jsfiddle.net/kizu/4RPFa/4570/
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap; /* this is required unless you put the helper span closely near the img */
text-align: center; margin: 1em 0;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />
</div>
<div class="frame">
<span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=17px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=15px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=13px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=11px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=9px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=7px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=5px />
</div>
<div class="frame">
<span class="helper"></span>
<img src="http://jsfiddle.net/img/logo.png" height=3px />
</div>
Wenn Sie in modernen Browsern kein zusätzliches Element haben möchten und die Verwendung von IE - Ausdrücken nicht stört, können Sie ein Pseudoelement verwenden und es mit einem praktischen Ausdruck zu IE hinzufügen Das wird nur einmal pro Element ausgeführt, daher gibt es keine Leistungsprobleme:
Die Lösung mit :before
und expression()
für IE: http://jsfiddle.net/kizu/4RPFa/4571/
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame:before,
.frame_before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
/* Move this to conditional comments */
.frame {
list-style:none;
behavior: expression(
function(t){
t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');
t.runtimeStyle.behavior = 'none';
}(this)
);
}
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>
Wie es funktioniert:
Wenn Sie zwei inline-block
-Elemente in der Nähe haben, können Sie sie an der anderen Seite ausrichten. Mit vertical-align: middle
erhalten Sie etwa Folgendes:
Wenn Sie einen Block mit fester Höhe haben (in px
, em
oder einer anderen absoluten Einheit), können Sie die Höhe der inneren Blöcke in %
einstellen.
inline-block
mit height: 100%
in einem Block mit fester Höhe hinzufügen, wird ein anderes inline-block
-Element (<img/>
in Ihrem Fall) vertikal nahe daran ausgerichtet.Das könnte nützlich sein:
div {
position:relative;
width:200px;
height:200px;
}
img {
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.image {
min-height:50px
}
Referenz: http://www.student.oulu.fi/~laurirai/www/css/middle/
matejkramnys Lösung ist ein guter Anfang, aber übergroße Bilder haben ein falsches Verhältnis.
Hier ist meine Gabel:
demo: https://jsbin.com/lidebapomi/edit?html,css,output
<div class="frame">
<img src="foo"/>
</div>
CSS:
.frame {
height: 160px; /*can be anything*/
width: 160px; /*can be anything*/
position: relative;
}
img {
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3-Linien-Lösung:
position: relative;
top: 50%;
transform: translateY(-50%);
Dies gilt für alles.
Von hier .
Eine reine CSS-Lösung:
Das CSS:
.frame {
margin: 1em 0;
height: 35px;
width: 160px;
border: 1px solid red;
position: relative;
}
img {
max-height: 25px;
max-width: 160px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #3A6F9A;
}
Schlüsselzeug
// position: relative; - in .frame holds the absolute element within the frame
// top: 0; bottom: 0; left: 0; right: 0; - this is key for centering a component
// margin: auto; - centers the image horizontally & vertically
Für diejenigen, die auf diesem Beitrag gelandet sind und an einer moderneren Lösung interessiert sind und keine älteren Browser unterstützen müssen, können Sie Folgendes tun:
.frame {
display: flex;
/*Uncomment below to center horizontally*/
/*justify-content: center;*/
align-items: center;
}
img {
height: auto;
}
/* Styling stuff not needed for demo */
.frame {
max-width: 900px;
height: 200px;
margin: auto;
background: #222;
}
p {
max-width: 900px;
margin: 20px auto 0;
}
img {
width: 150px;
}
<div class="frame">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9988/hand-pointing.png">
</div>
Hier ist ein Stift: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e
Auf diese Weise können Sie ein Bild vertikal zentrieren ( demo ):
div{
height:150px; //IE7fix
line-height: 150px;
}
img{
vertical-align: middle;
margin-bottom:0.25em;
}
Sie könnten versuchen, das CSS von PI auf display: table-cell; vertical-align: middle;
einzustellen.
Sie können auch Flexbox verwenden, um das korrekte Ergebnis zu erzielen:
.parent {
align-items: center; /* for vertical align */
background: red;
display: flex;
height: 250px;
/* justify-content: center; <- for horizontal align */
width: 250px;
}
<div class="parent">
<img class="child" src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>
Es gibt eine super easy Lösung mit flexbox!
.frame {
display: flex;
align-items: center;
}
Sie können den folgenden Code ausprobieren
.frame{
display:flex;
justify-content: center;
align-items: center;
width:100%;
}
<div class="frame" style="height: 25px;">
<img src="http://jsfiddle.net/img/logo.png" />
</div>
Hintergrundbildlösung Ich habe das Bildelement alle zusammen entfernt und als Hintergrund des div mit der Klasse .frame
festgelegt.
dies funktioniert zumindest gut mit IE8, FF6 und Chrome13
Ich habe überprüft, dass diese Lösung nicht dazu geeignet ist, Bilder größer als 25px zu verkleinern. Es gibt eine Eigenschaft mit dem Namen background-size
, die die Größe des Elements festlegt. CSS3 steht jedoch in Konflikt mit der IE7-Anforderung.
Ich würde Ihnen raten, entweder die Prioritäten Ihres Browsers zu erneuern und für die besten verfügbaren Browser zu entwerfen, oder Sie erhalten einen Servercode, um die Größe der Bilder zu ändern, wenn Sie diese Lösung verwenden möchten
.frame {
height: 35px; /* equals max image height */
width: 160px;
border: 1px solid red;
text-align: center;
margin: 1em 0;
display: table-cell;
vertical-align: middle;
}
img {
background: #3A6F9A;
display: block;
max-height: 35px;
max-width: 160px;
}
Die Schlüsseleigenschaft lautet display: table-cell; für .frame. Div.frame wird hiermit als Inline angezeigt, daher müssen Sie es in ein Blockelement einschließen.
Dies funktioniert in FF, Opera, Chrome, Safari und IE8 +.
AKTUALISIEREN
Für IE7 müssen wir einen CSS-Ausdruck hinzufügen:
*:first-child+html img {
position: relative;
top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}
Sie könnten das tun:
.frame {
height: 25px; /* equals max image height */
line-height: 25px;
width: 160px;
border: 1px solid red;
text-align: center; margin: 1em 0;
position: relative; /* Changes here... */
}
img {
background: #3A6F9A;
max-height: 25px;
max-width: 160px;
top: 50%; /* here.. */
left: 50%; /* here... */
position: absolute; /* and here */
}
$("img").each(function(){
this.style.marginTop = $(this).height() / -2 + "px";
})
Versuchen Sie diese Lösung mit reinem css http://jsfiddle.net/sandeep/4RPFa/72/ Dies könnte das Hauptproblem Ihrer HTML-Datei sein. Sie verwenden kein Zitat, wenn Sie in Ihrer HTML-Datei class
& image height
definieren.
CSS:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
position:relative;
margin: 1em 0;
top: 50%;
text-align: center;
line-height: 24px;
margin-bottom:20px;
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height:0;
margin:0 auto;
max-height:25px;
}
EDIT:
Wenn ich mit dem Tag img
arbeite, lasse ich 3px to 2px
Platz von top
. Jetzt verringere ich line-height
& es ist Arbeit . css:
.frame {
height: 25px; /* equals max image height */
width: 160px;
border: 1px solid red;
margin: 1em 0;
text-align: center;
line-height:22px;
*:first-child+html line-height:24px; /* for IE7 */
}
img {
background: #3A6F9A;
vertical-align: middle;
line-height:0;
max-height:25px;
max-width:160px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.frame {
line-height:20px; /* webkit browsers */
}
die line-height
-Eigenschaft ist render
in verschiedenen Browsern unterschiedlich. So; Wir müssen verschiedene line-height
-Eigenschaftsbrowser definieren
Überprüfen Sie dieses Beispiel http://jsfiddle.net/sandeep/4be8t/11/
Sehen Sie sich dieses Beispiel über line-height
an, die in verschiedenen Browsern unterschiedlich sind Unterschiedliche Eingabehöhen in Firefox und Chrome
Nicht sicher in Bezug auf den IE, aber unter Firefox und Chrome. Wenn Sie eine img
in einem div
-Container haben, sollte die folgende css funktionieren. Zumindest funktioniert das für mich gut:
div.img-container {
display:table-cell;
vertical-align: middle;
height: 450px;
width: 490px;
}
div.img-container img {
max-height: 450px;
max-width: 490px;
}
Meine Lösung: http://jsfiddle.net/XNAj6/2/
<div class="container">
<div class="frame">
<img src="http://jsfiddle.net/img/logo.png" class="img" alt="" />
</div>
</div>
.container {
display: table;
float: left;
border: solid black 1px;
margin: 2px;
padding: 0;
background-color: black;
width: 150px;
height: 150px;
}
.frame {
display: table-cell;
text-align: center;
vertical-align: middle;
border-width: 0;
}
.img {
max-width: 150px;
max-height: 150px;
vertical-align: middle;
}
Einfache Möglichkeit welche Arbeit für mich:
img {
vertical-align: middle;
display: inline-block;
position: relative;
}
Funktioniert sehr gut für Google Chrome. Versuchen Sie es mit einem anderen Browser.
Dies funktioniert für moderne Browser (2016 zum Zeitpunkt der Bearbeitung), wie in dieser Demo über Codepen gezeigt.
.frame {
height: 25px;
line-height: 25px;
width: 160px;
border: 1px solid #83A7D3;
}
.frame img {
background: #3A6F9A;
display:inline-block;
vertical-align: middle;
}
Es ist sehr wichtig, dass Sie den Bildern entweder eine Klasse zuweisen oder Vererbung verwenden, um die Bilder, die Sie benötigen, zentriert anzuzeigen. In diesem Beispiel haben wir .frame img {}
verwendet, damit nur Bilder von einem div mit einer Klasse von .frame
umschlossen werden.
Manchmal sollte es gelöst werden, indem es als Tabelle/Tabellenzelle angezeigt wird. Zum Beispiel einen schnellen Titelbildschirm. Es ist auch ein empfohlener Weg von W3. Ich empfehle Ihnen, diesen Link mit dem Namen Centering Things von W3C.org zu überprüfen
Die hier verwendeten Tipps sind:
.container {
position:absolute;
display:table;
width:100%;
height:100%;
}
.content {
display:table-cell;
vertical-align:middle;
}
<div class="container">
<div class="content">
<h1 style="text-align:center"> PEACE IN THE WORLD </h1>
</div>
</div>
Ich persönlich stimme der Verwendung von Helfern für diesen Zweck eigentlich nicht zu
Wenn Sie mit Rändern in Pixelgröße leben können, fügen Sie einfach font-size: 1px;
zum .frame
hinzu. Denken Sie jedoch daran, dass jetzt auf .frame
1em = 1px, was bedeutet, dass Sie auch den Rand in Pixel einstellen müssen.
http://jsfiddle.net/feeela/4RPFa/96/
EDIT: jetzt nicht mehr in Opera zentriert ...
Zum Zentrieren eines Bildes innerhalb eines Containers (es könnte ein Logo sein) neben einem Text wie dem folgenden:
Grundsätzlich wickeln Sie das Bild ein
.outer-frame {
border: 1px solid red;
min-height: 200px;
text-align: center; //only for align horizontally
}
.wrapper{
line-height: 200px;
border: 2px dashed blue;
border-radius: 20px;
margin: 50px
}
img {
//height: auto;
vertical-align: middle;
}
<div class="outer-frame">
<div class="wrapper">
some text
<img src="http://via.placeholder.com/150x150">
</div>
</div>
sie können dies verwenden:
.loaderimage {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
margin-top: -30px;/*50% of the height*/
margin-left: -30px;
}
Ich hatte das gleiche Problem. Das funktioniert für mich:
<style type="text/css">
div.parent {
position: relative;
}
img.child {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
</style>
<div class="parent">
<img class="child">
</div>
Mit der table
- und der table-cell
-Methode erledigen Sie die Aufgabe, insbesondere weil Sie auch auf alte Browser abzielen. Ich erstelle für Sie ein Snippet, das Sie ausführen können, und überprüfen das Ergebnis:
.wrapper {
position: relative;
display: table;
width: 300px;
height: 200px;
}
.inside {
vertical-align: middle;
display: table-cell;
}
<div class="wrapper">
<div class="inside">
<p>Centre me please!!!</p>
</div>
<div class="inside">
<img src="https://cdn2.iconfinder.com/data/icons/social-icons-circular-black/512/stackoverflow-128.png" />
</div>
</div>
Stellen Sie sich vor, Sie haben
<div class="wrap">
<img src="#">
</div>
Und CSS:
.wrap {
display: flex;
}
.wrap img {
object-fit: contain;
}
Dieser Code funktioniert gut für mich.
<style>
.listing_container{width:300px; height:300px;font: 0/0 a;}
.listing_container:before { content: ' ';display: inline-block;vertical-align: bottom;height: 100%;}
.listing_container img{ display: inline-block; vertical-align: middle;font: 16px/1 Arial sans-serif; max-height:100%; max-width:100%;}
<style>
<div class="listing_container">
<img src="http://www.advancewebsites.com/img/theme1/logo.png">
</div>
Ich suchte nach einer ähnlichen Antwort und einige der Vorschläge schnappten das Bild nach links oder das vertikale Verhältnis verknackte das Bild, also kam ich zu dieser Lösung ... Sie zentriert den Inhalt vertikal und horizontal.
.div{
position: relative;
overflow: hidden;
}
.bantop img {
position: absolute;
margin: auto;
width: 103%;
height: auto;
top: -50%;
bottom: -50%;
left: -50%;
right: -50%;
}
Ich verwende es für mehrere Projekte und es funktioniert wie ein Sharm
wie wäre es mit diesem?
position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;
und du kannst font-size
variieren
Die beste Lösung ist das
.block{
/* decor */
padding:0 20px;
background:#666;
border:2px solid #fff;
text-align:center;
/* important */
min-height:220px;
width:260px;
white-space:nowrap;
}
.block:after{
content:'';
display:inline-block;
height:220px; /* the same as min-height */
width:1px;
overflow:hidden;
margin:0 0 0 -5px;
vertical-align:middle;
}
.block span{
vertical-align:middle;
display:inline-block;
white-space:normal;
}
Ich habe mit Padding für die Ausrichtung der Mitte herumgespielt. Sie müssen die Größe der äußeren Container der obersten Ebene definieren, die Größe des inneren Containers sollte jedoch geändert werden, und Sie können den Abstand mit unterschiedlichen Prozentwerten einstellen.
<div class='container'>
<img src='image.jpg' />
</div>
.container {
padding: 20%;
background-color: blue;
}
img {
width: 100%;
}
Der alte JSFiddle-Link, den ich hier gepostet habe, funktionierte nicht mehr, das ist wahrscheinlich der Grund für das Downvote. Nur weil dies eine gültige Antwort ist, möchte ich noch einmal die jQuery-Lösung posten. Dies funktioniert für jedes Element, auf das die v_align
-Klasse angewendet wurde. Es wird vertikal zentriert im übergeordneten Element und beim Ändern der Größe des Fensters wird es neu berechnet.
$(document).ready(function() {
// define the class that vertial aligns stuff
var objects = '.v_align';
// initial setup
verticalAlign(objects);
// register resize event listener
$(window).resize(function() {
verticalAlign(objects);
});
});
function verticalAlign(selector) {
$(selector).each(function(val) {
var parent_height = $(this).parent().height();
var dif = parent_height - $(this).height()
// should only work if the parent is larger than the element
var margin_top = dif > 0 ? dif/2 : 0;
$(this).css("margin-top", margin_top + "px");
});
}
Möchten Sie ein Bild ausrichten, das hinter einem Text/Titel steht und sich beide innerhalb eines Divs befinden?
Siehe unter JSfiddle oder Code-Snippet ausführen.
Stellen Sie sicher, dass Sie bei allen Elementen (div, img, title usw.) eine ID oder eine Klasse haben.
Für mich funktioniert diese Lösung auf allen Browsern (für mobile Geräte müssen Sie Ihren Code mit: @media anpassen).
h2.h2red {
color: red;
font-size: 14px;
}
.mydivclass {
margin-top: 30px;
display: block;
}
img.mydesiredclass {
margin-right: 10px;
display: block;
float: left;/*If you want to allign the text with an image on the same row*/
width: 100px;
heght: 100px;
margin-top: -40px/*Change this value to adapt to your page*/;
}
<div class="mydivclass">
<br />
<img class="mydesiredclass" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Wikipedia-logo-v2-en.svg/2000px-Wikipedia-logo-v2-en.svg.png">
<h2 class="h2red">Text alligned after image inside a div by negative manipulate the img postion</h2>
</div>