බෙදීමක් තුළ රූපයක් සිරස් අතට පෙළගස්වන්නේ කෙසේද

අන්තර්ගතයක් ඇතුළත රූපයක් පෙළගස්වන්නේ divකෙසේද?

උදාහරණයක්

මගේ උදාහරණයේ දී, මම සමඟ සිරස් අතට කේන්ද්‍රගත <img>කළ <div>යුතුය class ="frame":

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

.frameරූපයේ උස සවි කර ඇති අතර රූපයේ උස නොදනී. .frameඑකම විසඳුම නම් මට නව අංග එකතු කළ හැකිය . මම මෙය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 සහ පසුව වෙබ්කිට්, හූනා මත කිරීමට උත්සාහ කරමි.

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>

නැතහොත්, ඔබට නවීන බ්‍රව්සර්වල අමතර අංගයක් තිබීමට අවශ්‍ය නැතිනම් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ප්‍රකාශන භාවිතා කිරීමට අකමැති නම්, ඔබට ව්‍යාජ මූලද්‍රව්‍යයක් භාවිතා කර පහසු ප්‍රකාශනයක් භාවිතා කරමින් එය අන්තර්ජාල එක්ස්ප්ලෝරර් වෙත එක් කළ හැකිය, එය ක්‍රියාත්මක වන්නේ එක් මූලද්‍රව්‍යයකට එක් වරක් පමණි , එබැවින් කාර්ය සාධන ගැටළු නොමැත:

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සමඟ :beforeසහ expression()සඳහා විසඳුම : 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;
}

නිවැරදි ප්‍රති result ලය ලබා ගැනීම සඳහා ඔබට 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;
}

ඔබට PI හි CSS සැකසීමට උත්සාහ කළ හැකිය 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 class="wrap">
    <img src="#">
</div>

සහ css:

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

පසුබිම් රූප විසඳුම

මම රූප මූලද්‍රව්‍යය මුළුමනින්ම ඉවත් කර එය පන්තියේ පසුබිමක් ලෙස සකසා ඇත .frame

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

මෙය අවම වශයෙන් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8, ෆයර්ෆොක්ස් 6 සහ ක්‍රෝම් 13 හි හොඳින් ක්‍රියා කරයි.

මම පරීක්ෂා කළ අතර, පික්සල් 25 ට වඩා විශාල රූප හැකිලීමට මෙම විසඳුම ක්‍රියා නොකරනු ඇත. background-sizeමූලද්‍රව්‍යයේ ප්‍රමාණය නියම කරන දේපලක් ඇත , නමුත් එය CSS 3 වන අතර එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 අවශ්‍යතා සමඟ ගැටෙයි.

ඔබගේ බ්‍රව්සරයේ ප්‍රමුඛතා නැවත ලබා ගැනීමට සහ ලබා ගත හැකි හොඳම බ්‍රව්සර් සඳහා සැලසුම් කිරීමට මම ඔබට උපදෙස් දෙමි, නැතහොත් ඔබට මෙම විසඳුම භාවිතා කිරීමට අවශ්‍ය නම් පින්තූර ප්‍රමාණය වෙනස් කිරීමට සේවාදායක පාර්ශවීය කේතයක් ලබා ගන්න.

ඔබට මෙය කළ හැකිය:

නිරූපණය

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

ජාවාස්ක්‍රිප්ට්

$("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;සඳහා .frameවේ. Div.frameමේ සමඟ පේළිගතව දර්ශනය වන බැවින් ඔබට එය බ්ලොක් මූලද්‍රව්‍යයකින් ඔතා ගත යුතුය.

මෙය ෆයර්ෆොක්ස්, ඔපෙරා, ක්‍රෝම්, සෆාරි සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 (සහ පසුව) තුළ ක්‍රියා කරයි.

යාවත්කාලීන කරන්න

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 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 සංස්කරණය කරන අවස්ථාවේ දී) කේත නිරූපණයේ මෙම නිරූපණයෙහි පෙන්වා ඇත

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

එක්කෝ ඔබ රූපවලට පන්තියක් ලබා දීම හෝ ඔබට කේන්ද්‍රගතව අවශ්‍ය රූප ඉලක්ක කර ගැනීමට උරුමය භාවිතා කිරීම ඉතා වැදගත් වේ. මෙම උදාහරණයේ දී අප භාවිතා .frame img {}කළේ පංතියක් සහිත ඩිවයකින් ඔතා ඇති රූප පමණක් .frameඉලක්ක කර ගැනීම සඳහා ය.

පිරිසිදු CSS සමඟ මෙම විසඳුම උත්සාහ කරන්න http://jsfiddle.net/sandeep/4RPFa/72/

සමහර විට එය ඔබගේ HTML හි ඇති ප්‍රධාන ගැටළුව විය හැකිය. ඔබේ HTML හි c lass& යන්න අර්ථ දක්වන විට ඔබ උපුටා දැක්වීම් භාවිතා නොකරයි image height.

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විවිධ බ්‍රව්සර්වල වෙනස් ගැන මෙම උදාහරණය පරීක්ෂා කරන්න : ෆයර්ෆොක්ස් සහ ක්‍රෝම් හි ආදාන උස වෙනස්කම්

මම Internet Explorer ගැන වග බලා ගන්න නැහැ, නමුත් ෆයර්ෆොක්ස් සහ 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;
}

එය ගූගල් ක්‍රෝම් සඳහා ඉතා හොඳින් ක්‍රියා කරයි. මෙය වෙනත් බ්‍රව්සරයකින් අත්හදා බලන්න.

පින්තූරයක් බහාලුමක් තුළ කේන්ද්‍රගත කිරීම සඳහා (එය ලාංඡනයක් විය හැකිය) මේ වගේ පෙළකට අමතරව:

මූලික වශයෙන් ඔබ රූපය ඔතා

.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. නමුත් මතක තබා ගන්න, දැන් .frame1em = 1px හි, එයින් අදහස් වන්නේ ඔබ ආන්තිකය පික්සල් වලින්ද සැකසිය යුතු බවයි.

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

දැන් එය ඔපෙරා හි තවදුරටත් කේන්ද්‍රගත වී නොමැත…

මටත් ඒ වගේ ප්‍රශ්නයක් තිබුණා. මෙය මට වැඩ කරයි:

<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ක්‍රමවේදය මඟින් කාර්යය ඉටු කරන්න, විශේෂයෙන් ඔබ පැරණි බ්‍රව්සර් කිහිපයක් ඉලක්ක කර ඇති නිසා, මම ඔබට ස්නිපටයක් නිර්මාණය කර ඔබට එය ක්‍රියාත්මක කර ප්‍රති result ලය පරීක්ෂා කළ හැකිය:

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

පෙළකට / මාතෘකාවකට පසුව ඇති රූප දෙකම පෙළගැස්වීමට අවශ්‍යද?

දකින JSfiddle හෝ ධාවනය සංග්රහයේ ඇබිත්ත.

ඔබගේ සියලුම අංග (div, img, title, ආදිය) තුළ හැඳුනුම්පතක් හෝ පන්තියක් ඇති බවට වග බලා ගන්න.

මා සඳහා මෙම විසඳුම සියලුම බ්‍රව්සර්වල ක්‍රියාත්මක වේ (ජංගම උපාංග සඳහා ඔබේ කේතය අනුවර්තනය කළ යුත්තේ: @ මීඩියා).

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>