css - vertically - كيف يتم محاذاة صورة رأسية داخل div؟




vertical align css (20)

سؤال

كيف يمكنك محاذاة صورة داخل div يحتوي على؟

مثال

في المثال الخاص بي ، أحتاج إلى توسيط عمودي <img> في <div> مع class ="frame ":

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

تم إصلاح ارتفاع إطار الصورة وارتفاع الصورة غير معروف. يمكنني إضافة عناصر جديدة في .frame إذا كان هذا هو الحل الوحيد. أحاول القيام بذلك على IE≥7 ، Webkit ، أبو بريص.

انظر jsfiddle here

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


حل استخدام الجدول والجدول الجدول

في بعض الأحيان يجب أن يتم حلها عن طريق عرض خلية الجدول / الجدول. على سبيل المثال شاشة العنوان سريع. إنها طريقة موصى بها من قبل W3 أيضًا. أوصيك بالتحقق من هذا الرابط المسمى Centering things من 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> 

شخصيا أنا في الواقع لا أوافق على استخدام المساعدين لهذا الغرض


A PURE CSS Solution:

http://jsfiddle.net/3MVPM/

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

الاشياء الرئيسية

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

إذا كنت تستطيع العيش مع هوامش بحجم البكسل ، فقط أضف font-size: 1px; إلى .frame . ولكن تذكر ، أنه الآن على .frame 1em = 1px ، مما يعني أنك بحاجة إلى تعيين الهامش بالبكسل أيضًا.

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

تعديل: الآن لم تعد تتمحور في الأوبرا ...


الحل الأفضل هو ذلك

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

الطريقة الوحيدة (وأفضل متصفح عبر) كما أعلم هي استخدام مساعد inline-block مع height: 100% vertical-align: middle على كلا العنصرين.

لذلك هناك حل: 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>

أو ، إذا كنت لا ترغب في الحصول على عنصر إضافي في المتصفحات الحديثة ولا تمانع في استخدام تعبيرات IE ، فيمكنك استخدام عنصر زائف وإضافته إلى IE باستخدام تعبير ملائم ، يتم تشغيله مرة واحدة فقط لكل عنصر ، لذلك لن يكون هناك أي مشاكل في الأداء:

الحل مع :before و expression() لـ 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>

كيف تعمل:

  1. عندما يكون لديك عنصرين inline-block لبعضهما البعض بالقرب من بعضهما البعض ، يمكنك محاذاة كل منهما إلى جانب الآخر ، لذلك باستخدام vertical-align: middle ستحصل على شيء كالتالي:

  2. عندما يكون لديك كتلة ذات ارتفاع ثابت (في px أو em أو وحدة مطلقة أخرى) ، يمكنك ضبط ارتفاع الكتل الداخلية في % .

  3. لذلك ، إضافة inline-block واحدة inline-block مع height: 100% في كتلة ذات ارتفاع ثابت inline-block عنصر inline-block آخر فيه ( <img/> في حالتك) عموديًا بالقرب منه.

باستخدام طريقة 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/-128.png" />
  </div>
</div> 


بهذه الطريقة يمكنك توسيط صورة رأسياً ( demo ):

div{
  height:150px; //IE7fix
  line-height: 150px;
}
img{
  vertical-align: middle;
  margin-bottom:0.25em;
}

جرب هذا الحل باستخدام css الصافي http://jsfiddle.net/sandeep/4RPFa/72/ قد تكون المشكلة الرئيسية في html الخاص بك. لا تستخدم عرض السعر عند تحديد c lass image height في html.

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

تصحيح :

عندما أعمل مع علامة img ، نترك مساحة 3px to 2px من top . الآن أقوم بتقليل line-height وعمله. المغلق:

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

يتم render خاصية line-height بشكل مختلف في المتصفحات المختلفة. وبالتالي؛ علينا تحديد مستعرضات مختلفة لخصائص line-height

تحقق من هذا المثال http://jsfiddle.net/sandeep/4be8t/11/

تحقق من هذا المثال حول line-height اختلافًا في اختلافات ارتفاع دخل المتصفحات المختلفة في Firefox و Chrome


طريقة سهلة تعمل من أجلي:

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

يعمل لجوجل كروم بشكل جيد للغاية. جرب هذا على متصفح مختلف.



لتوسيط صورة داخل حاوية (يمكن أن يكون شعارًا) إلى جانب بعض النصوص مثل هذا:

في الأساس تقوم بتغليف الصورة

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


لست متأكدًا من IE ، ولكن ضمن 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;
}

لم يعمل رابط JSFiddle القديم الذي نشرته هنا بعد الآن ، وربما هذا هو سبب التراجع. فقط من أجل أن تكون هذه إجابة صحيحة ما زلت أرغب في نشر حل jQuery مرة أخرى. يعمل هذا لكل عنصر يحتوي على فئة v_align المطبقة عليه. سيكون العمودي متمركزًا في الأصل وعلى تغيير حجم النافذة سيتم إعادة حسابها.

رابط إلى 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");
  });
}

ماذا عن هذا؟

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

ويمكنك تغيير font-size


هناك حل سهل جدا مع flexbox!

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

يمكنك أن تجرب أدناه رمز

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


يمكنك فعل هذا:

عرض

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


جافا سكريبت

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

يمكنك محاولة إعداد CSS لـ PI display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle;


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

حل صورة الخلفية لقد قمت بإزالة عنصر الصورة معًا .frame كخلفية لـ div مع فئة من .frame

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

هذا على الأقل يعمل بشكل جيد على IE8 و FF6 و Chrome13

لقد دققت ، لن يعمل هذا الحل على تقليص الصور التي يزيد حجمها عن 25 بكسل. هناك خاصية تسمى background-size والتي تحدد حجم العنصر ، ولكنها CSS3 تتعارض مع متطلب IE7.

أود أن أنصحك إما بإعادة تحديد أولويات متصفحك وتصميم أفضل المتصفحات المتوفرة ، أو الحصول على بعض كودات الخوادم لتغيير حجم الصور إذا كنت تريد استخدام هذا الحل





vertical-alignment