วิธีจัดแนวภาพใน div ในแนวตั้ง

คุณจะจัดแนวรูปภาพภายในของที่บรรจุได้divอย่างไร?

ตัวอย่าง

ในตัวอย่างของฉันฉันจำเป็นต้องตั้งศูนย์ให้<img>ตรง<div>กับclass ="frame":

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

.frameความสูงของภาพได้รับการแก้ไขและไม่ทราบความสูงของภาพ ฉันสามารถเพิ่มองค์ประกอบใหม่ได้.frameถ้านั่นเป็นทางออกเดียว ฉันพยายามทำสิ่งนี้บน Internet Explorer 7 และใหม่กว่า WebKit, Gecko

ดู jsfiddle ที่นี่

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

วิธีเดียว (และเบราว์เซอร์ที่ดีที่สุด) เท่าที่ฉันรู้คือการใช้inline-blockผู้ช่วยที่มีheight: 100%และvertical-align: middleในองค์ประกอบทั้งสอง

ดังนั้นจึงมีทางออกคือ: 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>

หรือถ้าคุณไม่ต้องการมีองค์ประกอบเพิ่มเติมในเบราว์เซอร์สมัยใหม่และไม่สนใจการใช้นิพจน์ Internet Explorer คุณสามารถใช้องค์ประกอบปลอมและเพิ่มลงใน Internet Explorer โดยใช้ Expression ที่สะดวกสบายซึ่งจะทำงานเพียงครั้งเดียวต่อองค์ประกอบ ดังนั้นจะไม่มีปัญหาด้านประสิทธิภาพ:

วิธีแก้ปัญหาด้วย:beforeและexpression()สำหรับ 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>

มันทำงานอย่างไร:

1. เมื่อคุณมีinline-blockองค์ประกอบสองอย่างที่อยู่ใกล้กันคุณสามารถจัดเรียงของกันและกันเข้าหากันดังนั้นvertical-align: middleคุณจะได้สิ่งนี้:

   

2. เมื่อคุณมีบล็อกที่มีความสูงคงที่ (ในpx, emหรืออีกหน่วยแน่นอน) %คุณสามารถตั้งค่าความสูงของตึกด้านใน

3. ดังนั้นการเพิ่มหนึ่งinline-blockที่มีheight: 100%ในบล็อกมีความสูงคงที่จะจัดอีกinline-blockองค์ประกอบในนั้น ( <img/>ในกรณีของคุณ) ในแนวตั้งอยู่ใกล้มัน

สิ่งนี้อาจมีประโยชน์:

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

ทางออกของ matejkramny เป็นการเริ่มต้นที่ดี แต่รูปภาพที่มีขนาดใหญ่มีอัตราส่วนที่ไม่ถูกต้อง

นี่คือทางแยกของฉัน:

การสาธิต: 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;
}

โซลูชันสามบรรทัด:

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

สิ่งนี้ใช้ได้กับทุกสิ่ง

จากที่นี่

บริสุทธิ์แก้ปัญหา 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;
}

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

สิ่งสำคัญ

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

สำหรับโซลูชันที่ทันสมัยกว่าและหากไม่จำเป็นต้องสนับสนุนเบราว์เซอร์รุ่นเก่าคุณสามารถทำได้:

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

นี่คือปากกา: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e

วิธีนี้คุณสามารถจัดกึ่งกลางภาพตามแนวตั้ง ( สาธิต ):

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

นอกจากนี้คุณสามารถใช้ Flexbox เพื่อให้ได้ผลลัพธ์ที่ถูกต้อง:

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

มีเรื่องง่ายสุด ๆทางออกด้วยflexbox!

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

คุณสามารถลองตั้งค่า CSS ของ PI เป็น display: table-cell; vertical-align: middle;

คุณสามารถลองรหัสด้านล่าง:

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

โซลูชันภาพพื้นหลัง

ฉันลบองค์ประกอบภาพทั้งหมดและตั้งเป็นพื้นหลังของ div ด้วยคลาส .frame

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

อย่างน้อยก็ทำงานได้ดีบน Internet Explorer 8, Firefox 6 และ Chrome 13

ฉันตรวจสอบแล้วและโซลูชันนี้จะไม่ทำงานเพื่อลดขนาดรูปภาพที่มีขนาดสูงกว่า 25 พิกเซล มีคุณสมบัติที่เรียกว่าเป็นbackground-sizeซึ่งกำหนดขนาดขององค์ประกอบ แต่เป็น CSS 3 ซึ่งจะขัดแย้งกับข้อกำหนดของ Internet Explorer 7

ฉันขอแนะนำให้คุณทำลำดับความสำคัญของเบราว์เซอร์และออกแบบใหม่สำหรับเบราว์เซอร์ที่ดีที่สุดหรือรับรหัสฝั่งเซิร์ฟเวอร์เพื่อปรับขนาดภาพหากคุณต้องการใช้โซลูชันนี้

ลองนึกภาพคุณ

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

และ CSS:

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

คุณสามารถทำได้:

การสาธิต

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

คุณสมบัติที่สำคัญคือสำหรับdisplay: table-cell; จะแสดงเป็นแบบอินไลน์กับสิ่งนี้ดังนั้นคุณต้องห่อมันในองค์ประกอบบล็อก.frameDiv.frame

สามารถใช้งานได้ใน Firefox, Opera, Chrome, Safari และ Internet Explorer 8 (และใหม่กว่า)

UPDATE

สำหรับ Internet Explorer 7 เราจำเป็นต้องเพิ่มการแสดงออกของ CSS:

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

โซลูชันของฉัน: 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;
}

ใช้งานได้กับเบราว์เซอร์สมัยใหม่ (2016 ขณะแก้ไข) ดังที่แสดงในตัวอย่างนี้สำหรับ codepen

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

มันสำคัญมากที่คุณจะต้องให้คลาสของรูปภาพหรือใช้การสืบทอดเพื่อกำหนดเป้าหมายรูปภาพที่คุณต้องการให้อยู่กึ่งกลาง ในตัวอย่างนี้เราใช้.frame img {}เพื่อให้เฉพาะภาพที่ถูกล้อมรอบด้วย div ที่มีคลาส.frameเป็นเป้าหมาย

ลองใช้วิธีนี้ด้วย CSS บริสุทธิ์ http://jsfiddle.net/sandeep/4RPFa/72/

อาจเป็นปัญหาหลักกับ HTML ของคุณ คุณไม่ได้ใช้เครื่องหมายคำพูดเมื่อคุณกำหนด c lass&image heightใน HTML ของคุณ

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

เมื่อผมทำงานรอบกับimgแท็กก็ออก 3 แสนพิกเซล 2 topพื้นที่พิกเซลจาก ตอนนี้ฉันลดลงline-heightและมันใช้งานได้

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

line-heightคุณสมบัติการแสดงผลที่แตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน ดังนั้นเราต้องกำหนดความแตกต่างline-heightเบราว์เซอร์คุณสมบัติที่

ตรวจสอบตัวอย่างนี้: http://jsfiddle.net/sandeep/4be8t/11/

ตรวจสอบตัวอย่างนี้เกี่ยวกับline-heightเบราว์เซอร์ที่แตกต่างกัน: ความแตกต่างของความสูงของ Firefox และ Chrome

ฉันไม่แน่ใจเกี่ยวกับ Internet Explorer แต่ภายใต้ Firefox และ Chrome หากคุณมีimgในdivคอนเทนเนอร์เนื้อหา CSS ต่อไปนี้ควรใช้งานได้ อย่างน้อยสำหรับฉันมันใช้งานได้ดี:

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

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

วิธีการแก้ปัญหาโดยใช้เซลล์ตารางและตาราง

บางครั้งควรแก้ไขด้วยการแสดงเป็นตาราง / ตารางเซลล์ ตัวอย่างเช่นหน้าจอชื่ออย่างรวดเร็ว มันเป็นวิธีที่แนะนำโดย W3 ด้วย ฉันขอแนะนำให้คุณตรวจสอบลิงค์นี้ที่เรียกว่าบล็อกหรือรูปภาพตรงกลางจาก W3C.org

เคล็ดลับที่ใช้ที่นี่คือ:

• คอนเทนเนอร์ตำแหน่งแน่นอนแสดงเป็นตาราง
• จัดเรียงตามแนวตั้งให้ตรงกับเนื้อหากึ่งกลางที่แสดงเป็นเซลล์ตาราง

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

โดยส่วนตัวแล้วฉันไม่เห็นด้วยกับการใช้ตัวช่วยเพื่อจุดประสงค์นี้

วิธีง่ายๆที่ใช้ได้ผลกับฉัน:

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

มันใช้งานได้กับ Google Chrome ได้เป็นอย่างดี ลองใช้อันนี้ในเบราว์เซอร์อื่น

สำหรับการจัดกึ่งกลางภาพภายในคอนเทนเนอร์ (อาจเป็นโลโก้) นอกเหนือจากข้อความเช่นนี้:

โดยทั่วไปแล้วคุณห่อภาพ

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

ถ้าคุณสามารถมีชีวิตที่มีอัตรากำไรพิกเซลขนาดเพียงแค่เพิ่มไปยังfont-size: 1px; .frameแต่จำไว้ว่าตอนนี้ใน.frame 1em = 1px ซึ่งหมายความว่าคุณต้องกำหนดระยะขอบเป็นพิกเซลด้วย

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

ตอนนี้มันไม่ได้อยู่ตรงกลางอีกต่อไปใน Opera ...

ผมมีปัญหาเดียวกัน. สิ่งนี้ใช้ได้กับฉัน:

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

คุณสามารถใช้สิ่งนี้:

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

การใช้tableและtable-cellวิธีการทำงานโดยเฉพาะอย่างยิ่งเพราะคุณกำหนดเป้าหมายเบราว์เซอร์เก่าเช่นกันฉันสร้างตัวอย่างสำหรับคุณซึ่งคุณสามารถเรียกใช้และตรวจสอบผลลัพธ์:

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

ฉันเล่นรอบโดยใช้การเติมเต็มเพื่อจัดแนวกึ่งกลาง คุณจะต้องกำหนดขนาดด้านนอกคอนเทนเนอร์ระดับบนสุด แต่คอนเทนเนอร์ด้านในควรปรับขนาดและคุณสามารถตั้งค่าการแพ็ดที่ค่าเปอร์เซ็นต์ที่แตกต่างกัน

jsfiddle

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

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

img {
  width: 100%;
}

ทางออกที่ดีที่สุดคือ

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

ใช้อันนี้:

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

และคุณสามารถเปลี่ยนแปลงfont-sizeได้

ต้องการจัดแนวรูปภาพที่มีหลังจากข้อความ / ชื่อเรื่องและทั้งสองอยู่ใน div หรือไม่?

ดูที่JSfiddleหรือ Run Code Snippet

เพียงให้แน่ใจว่ามี ID หรือคลาสในทุกองค์ประกอบของคุณ (div, img, title, ฯลฯ )

สำหรับฉันใช้งานได้กับเบราว์เซอร์ทั้งหมด (สำหรับอุปกรณ์มือถือคุณต้องปรับรหัสของคุณด้วย: @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>