it-swarm.com.de

Wie kann ich ein Bild in einem Div vertikal ausrichten?

Frage

Wie kann man ein Bild innerhalb einer enthaltenden div ausrichten?

Beispiel

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>

1225
Arnaud Le Blanc

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:

  1. 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:

    Two aligned blocks

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

  3. Wenn Sie also einen 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.
1924
kizu

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/

473
Tahir Yasin

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

preview


HTML:

<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;
}
421
jomo

3-Linien-Lösung:

position: relative;
top: 50%;
transform: translateY(-50%);

Dies gilt für alles.

Von hier .

189
Jorge Orpinel

Eine reine CSS-Lösung:

http://jsfiddle.net/3MVPM/

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
130
code ninja

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

108
Ricardo Zea

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;
}
97
user669677

Sie könnten versuchen, das CSS von PI auf display: table-cell; vertical-align: middle; einzustellen.

22
Yeodave

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>

19
tourniquet

Es gibt eine super easy Lösung mit flexbox!

.frame {
    display: flex;
    align-items: center;
}
19
BBlackwo

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>

14
Santosh Khalse

Hintergrundbildlösung Ich habe das Bildelement alle zusammen entfernt und als Hintergrund des div mit der Klasse .frame festgelegt.

http://jsfiddle.net/URVKa/2/

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

http://jsfiddle.net/MBs64/

.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");
}
11
Webars

Sie könnten das tun:

demo

http://jsfiddle.net/DZ8vW/1

CSS

.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 */
}    


javascript

$("img").each(function(){
    this.style.marginTop = $(this).height() / -2 + "px";
})
11
Joseph Marikle

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

7
sandeep

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;
}
7
slava

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;
}
6
Ilya Lysenko

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.

5
DOCTYPE HTML

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.

5
anglimasS

LÖSUNG MIT TABLE & TABLE CELL

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:

  • Absoluter Positionierungscontainer wird als Tabelle angezeigt
  • Vertikal ausgerichtet, um den in der Mitte befindlichen Inhalt als Tabellenzelle anzuzeigen

.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

5
Sam

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

4
feeela

Zum Zentrieren eines Bildes innerhalb eines Containers (es könnte ein Logo sein) neben einem Text wie dem folgenden:

 enter image description here

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>

4
juliangonzalez

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;

}

2
Masoume Karvar

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

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> 

2
Alireza

Stellen Sie sich vor, Sie haben

<div class="wrap">
    <img src="#">
</div>

Und CSS:

.wrap {
    display: flex;
}
.wrap img {
    object-fit: contain;
}
0
fdrv

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>
0
sandeep kumar

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

0
Samuel Ramzan

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

0
th3pirat3

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;
}
0
Kumar

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.

jsfiddle

<div class='container'>
  <img src='image.jpg' />
</div>

.container {
  padding: 20%;
  background-color: blue;
}

img {
  width: 100%;
}
0
steven iseki

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.

Link zum JSFiddle

$(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");
  });
}
0
Chris

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>

0
mariusfv