Làm cách nào để căn chỉnh theo chiều dọc một hình ảnh bên trong div

Làm thế nào bạn có thể căn chỉnh một hình ảnh bên trong một chứa div?

Thí dụ

Trong ví dụ của tôi, tôi cần phải theo chiều dọc tập trung các <img>trong <div>với class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frameChiều cao của hình ảnh là cố định và chiều cao của hình ảnh là không xác định. Tôi có thể thêm các yếu tố mới .framenếu đó là giải pháp duy nhất. Tôi đang cố gắng làm điều này trên Internet Explorer 7 và sau đó, WebKit, Gecko.

Xem jsfiddle ở đây .

.frame {
    height: 25px;      /* Equals maximum 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>

Cách duy nhất (và cách tốt nhất cho trình duyệt chéo) mà tôi biết là sử dụng một trình inline-blocktrợ giúp có height: 100%và vertical-align: middletrên cả hai yếu tố.

Vì vậy, có một giải pháp: http://jsfiddle.net/kizu/4RPFa/4570/

.frame {
    height: 25px;      /* Equals maximum 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>

Hoặc, nếu bạn không muốn có một phần tử phụ trong các trình duyệt hiện đại và không bận tâm sử dụng các biểu thức Internet Explorer, bạn có thể sử dụng phần tử giả và thêm nó vào Internet Explorer bằng Biểu thức tiện lợi, chỉ chạy một lần cho mỗi phần tử , vì vậy sẽ không có bất kỳ vấn đề hiệu suất:

Giải pháp với :beforevà expression()cho Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

.frame {
    height: 25px;      /* Equals maximum 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>

Làm thế nào nó hoạt động:

1. Khi bạn có hai inline-blockyếu tố gần nhau, bạn có thể căn chỉnh nhau về phía bên kia, vì vậy với vertical-align: middlebạn sẽ nhận được một cái gì đó như thế này:

   

2. Khi bạn có một khối với chiều cao cố định (trong px, emhoặc một đơn vị tuyệt đối), bạn có thể thiết lập chiều cao của khối bên trong %.

3. Vì vậy, việc thêm một inline-blockvới height: 100%một khối có chiều cao cố định sẽ căn chỉnh một inline-blockyếu tố khác trong nó ( <img/>trong trường hợp của bạn) theo chiều dọc gần nó.

Điều này có thể hữu ích:

div {
    position: relative;
    width: 200px;
    height: 200px;
}
img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}
.image {
    min-height: 50px
}

Giải pháp của matejkramny là một khởi đầu tốt, nhưng hình ảnh quá khổ có tỷ lệ sai.

Đây là ngã ba của tôi:

Bản trình diễn: https://jsbin.com/lidebapomi/edit?html,css,output

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

Một giải pháp ba dòng:

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

Điều này áp dụng cho bất cứ điều gì.

Từ đây .

Một giải pháp CSS thuần túy :

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

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

Công cụ chính

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

Đối với một giải pháp hiện đại hơn và nếu không cần hỗ trợ các trình duyệt cũ, bạn có thể thực hiện việc này:

.frame {
    display: flex;
    /**
    Uncomment 'justify-content' below to center horizontally.
    ✪ Read below for a better way to center vertically and horizontally.
    **/

    /* justify-content: center; */
    align-items: center;
}

img {
    height: auto;

    /**
    ✪ To center this image both vertically and horizontally,
    in the .frame rule above comment the 'justify-content'
    and 'align-items' declarations,
    then  uncomment 'margin: auto;' below.
    **/

    /* margin: 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>

Đây là một cây bút: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

Bằng cách này bạn có thể căn giữa một hình ảnh theo chiều dọc ( bản demo ):

div{
  height: 150px; // Internet Explorer 7 fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom: 0.25em;
}

Ngoài ra, bạn có thể sử dụng Flexbox để đạt được kết quả chính xác:

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

Có một giải pháp siêu dễ dàng với flexbox!

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

Bạn có thể thử thiết lập CSS của PI thành display: table-cell; vertical-align: middle;

Bạn có thể thử đoạn mã dưới đây:

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

Giải pháp hình nền

Tôi đã loại bỏ hoàn toàn yếu tố hình ảnh và đặt nó làm nền của div với một lớp .frame

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

Điều này ít nhất hoạt động tốt trên Internet Explorer 8, Firefox 6 và Chrome 13.

Tôi đã kiểm tra và giải pháp này sẽ không hoạt động để thu nhỏ hình ảnh có chiều cao lớn hơn 25 pixel. Có một thuộc tính được gọi là background-sizeđặt kích thước của phần tử, nhưng đó là CSS 3 sẽ xung đột với các yêu cầu của Internet Explorer 7.

Tôi sẽ khuyên bạn nên làm lại các ưu tiên và thiết kế trình duyệt của bạn cho các trình duyệt khả dụng tốt nhất hoặc lấy một số mã phía máy chủ để thay đổi kích thước hình ảnh nếu bạn muốn sử dụng giải pháp này.

Hãy tưởng tượng bạn có

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

Và css:

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

Bạn có thể làm điều này:

Bản giới thiệu

http://jsfiddle.net/DZ8vW/1

CSS

.frame {
    height: 25px;      /* Equals maximum 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";
})

http://jsfiddle.net/MBs64/

.frame {
    height: 35px;      /* Equals maximum 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;
}

Các tài sản quan trọng là display: table-cell;cho .frame. Div.frameđược hiển thị dưới dạng nội tuyến với cái này, vì vậy bạn cần phải bọc nó trong một phần tử khối.

Điều này hoạt động trong Firefox, Opera, Chrome, Safari và Internet Explorer 8 (và sau này).

CẬP NHẬT

Đối với Internet Explorer 7, chúng ta cần thêm một biểu thức CSS:

*:first-child+html img {
    position: relative;
    top: expression((this.parentNode.clientHeight-this.clientHeight)/2+"px");
}

Giải pháp của tôi: 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;
}

Điều này hoạt động cho các trình duyệt hiện đại (năm 2016 tại thời điểm chỉnh sửa) như được hiển thị trong bản demo này trên codepen

.frame {
    height: 25px;
    line-height: 25px;
    width: 160px;
    border: 1px solid #83A7D3;          
}
.frame img {
    background: #3A6F9A;
    display:inline-block;
    vertical-align: middle;
}

Điều rất quan trọng là bạn cung cấp cho các hình ảnh một lớp hoặc sử dụng tính kế thừa để nhắm mục tiêu các hình ảnh mà bạn cần làm trung tâm. Trong ví dụ này, chúng tôi đã sử dụng .frame img {}sao cho chỉ những hình ảnh được bao bọc bởi một div có một lớp .framesẽ được nhắm mục tiêu.

Hãy thử giải pháp này với CSS thuần http://jsfiddle.net/sandeep/4RPFa/72/

Có lẽ đó là vấn đề chính với HTML của bạn. Bạn không sử dụng dấu ngoặc kép khi bạn xác định c lass& image heighttrong HTML của mình.

CSS:

.frame {
    height: 25px;      /* Equals maximum 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;
}

Khi tôi làm việc với imgthẻ, nó sẽ chừa khoảng trống 3 pixel đến 2 pixel top. Bây giờ tôi giảm line-height, và nó hoạt động.

CSS:

    .frame {
        height: 25px;      /* Equals maximum image height */
        width: 160px;
        border: 1px solid red;
        margin: 1em 0;
        text-align: center;
        line-height: 22px;
        *:first-child+html line-height:24px; /* For Internet Explorer 7 */
    }

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

Các line-heighttài sản được kết xuất khác nhau trong các trình duyệt khác nhau. Vì vậy, chúng ta phải xác định các line-heighttrình duyệt thuộc tính khác nhau .

Kiểm tra ví dụ này: http://jsfiddle.net/sandeep/4be8t/11/

Kiểm tra ví dụ này về line-heightsự khác nhau trong các trình duyệt khác nhau: sự khác biệt về chiều cao đầu vào trong Firefox và Chrome

Tôi không chắc chắn về Internet Explorer, nhưng trong Firefox và Chrome, nếu bạn có imgtrong một divthùng chứa, nội dung CSS sau sẽ hoạt động. Ít nhất với tôi nó hoạt động tốt:

div.img-container {
    display: table-cell;
    vertical-align: middle;
    height: 450px;
    width: 490px;
}

div.img-container img {
    max-height: 450px;
    max-width: 490px;
}

Giải pháp sử dụng một bảng và các ô của bảng

Đôi khi cần giải quyết bằng cách hiển thị dưới dạng bảng / ô. Ví dụ, một màn hình tiêu đề nhanh. Đó là một cách được đề xuất bởi W3 cũng. Tôi khuyên bạn nên kiểm tra liên kết này có tên là Định tâm một khối hoặc hình ảnh từ W3C.org.

Các mẹo được sử dụng ở đây là:

• Container định vị tuyệt đối hiển thị dưới dạng bảng
• Căn dọc với nội dung trung tâm được hiển thị dưới dạng ô bảng

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

Cá nhân tôi thực sự không đồng ý về việc sử dụng người trợ giúp cho mục đích này.

Một cách dễ dàng làm việc cho tôi:

img {
    vertical-align: middle;
    display: inline-block;
    position: relative;
}

Nó hoạt động cho Google Chrome rất tốt. Hãy thử cái này trong một trình duyệt khác.

Để căn giữa hình ảnh bên trong một thùng chứa (nó có thể là logo) bên cạnh một số văn bản như thế này:

Về cơ bản bạn bọc hình ảnh

.outer-frame {
  border: 1px solid red;
  min-height: 200px;
  text-align: center; /* Only to align horizontally */
}

.wrapper{
  line-height: 200px;
  border: 2px dashed blue;
  border-radius: 20px;
  margin: 50px
}

img {
  /* height: auto; */
  vertical-align: middle;   /* Only to align vertically */
}

<div class="outer-frame">
  <div class="wrapper">
    some text
    <img src="http://via.placeholder.com/150x150">
  </div>
</div>

Nếu bạn có thể sống với lề có kích thước pixel, chỉ cần thêm font-size: 1px;vào .frame. Nhưng hãy nhớ rằng, bây giờ trên .frame1em = 1px, điều đó có nghĩa là bạn cũng cần đặt lề theo pixel.

http://jsfiddle.net/feeela/4RPFa/96/

Bây giờ nó không còn là trung tâm nữa trong Opera Opera

Tôi đã từng gặp vấn đề tương tự. Điều này làm việc cho tôi:

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

Bạn có thể sử dụng điều này:

 .loaderimage {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    margin-top: -30px; /* 50% of the height */
    margin-left: -30px;
 }

Sử dụng tablevà table-cellphương pháp thực hiện công việc, đặc biệt vì bạn cũng nhắm mục tiêu một số trình duyệt cũ, tôi tạo một đoạn mã cho bạn để bạn có thể chạy nó và kiểm tra kết quả:

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

Tôi đã chơi xung quanh với việc sử dụng đệm để căn chỉnh trung tâm. Bạn sẽ cần xác định kích thước thùng chứa bên ngoài cấp cao nhất, nhưng thùng chứa bên trong sẽ thay đổi kích thước và bạn có thể đặt phần đệm ở các giá trị phần trăm khác nhau.

jsfiddle

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

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

img {
  width: 100%;
}

Giải pháp tốt nhất là

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

Sử dụng cái này:

position: absolute;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
line-height: 1em;

Và bạn có thể thay đổi font-size.

Bạn muốn căn chỉnh một hình ảnh có sau một văn bản / tiêu đề và cả hai đều nằm trong div?

Xem trên JSfiddle hoặc Chạy đoạn mã.

Chỉ cần chắc chắn có ID hoặc một lớp ở tất cả các yếu tố của bạn (div, img, title, v.v.).

Đối với tôi, giải pháp này trên tất cả các trình duyệt (đối với thiết bị di động, bạn phải điều chỉnh mã của mình bằng: @media).

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 aligned after image inside a div by negative manipulate the img position</h2>
</div>