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




center image (25)

سؤال

كيف يمكنك محاذاة صورة داخل 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>


Answers

أيضًا ، يمكنك استخدام 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>


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

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

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


الحل الخاص بي: 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;
}

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

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

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

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

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


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

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


باستخدام طريقة 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> 


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

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

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


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

الخاصية الرئيسية هي العرض: خلية الجدول ؛ من أجل. يتم عرض Div.frame كما هو مضمن مع هذا ، لذلك تحتاج إلى لفه في عنصر كتلة.

هذا يعمل في FF ، أوبرا ، كروم ، سفاري و IE8 +.

تحديث

بالنسبة إلى IE7 ، نحتاج إلى إضافة تعبير css:

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


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

تريد محاذاة الصورة التي لديها بعد نص / العنوان وكلاهما داخل div؟

انظر على JSfiddle أو Run Code Snippet.

فقط تأكد من وجود معرف أو فصل دراسي في جميع عناصرك (div، img، title، etc).

بالنسبة لي ، يعمل هذا الحل على جميع المتصفحات (بالنسبة للأجهزة المحمولة ، يجب عليك تكييف شفرتك مع: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 alligned after image inside a div by negative manipulate the img postion</h2>
</div>


يمكنك استخدام هذا:

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

}


ماذا عن هذا؟

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

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


الطريقة الوحيدة (وأفضل متصفح عبر) كما أعلم هي استخدام مساعد 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/> في حالتك) عموديًا بالقرب منه.

حل 3 خط:

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

هذا ينطبق على أي شيء.

من here


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

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

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


لست متأكدًا من 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

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

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

img {
  width: 100%;
}

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

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

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


بالنسبة لأولئك الذين وصلوا إلى هذا المنشور وهم مهتمون بحل أكثر حداثة ، ولا يحتاجون إلى دعم المتصفحات القديمة ، يمكنك القيام بذلك:

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

هنا قلم: http://codepen.io/ricardozea/pen/aa0ee8e6021087b6e2460664a0fa3f3e


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

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

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


هذا يعمل للمتصفحات الحديثة (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 .


كان لي نفس المشكلة. هذا يعمل بالنسبة لي:

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





css image vertical-alignment