كيفية توسيط صورة أفقياً, مع تعيين موضع مطلق, داخل div

الفكرة هي التركيز داخل DIV, صورة مع تحديد الموضع المطلق { موقف: المطلقة; }. للقيام بذلك, أولاً وقبل كل شيء هو تعيين, إلى شعبة هذا سوف تحتوي على الصورة, تحديد المواقع النسبيه, وبالتالي منع الموضع المطلق للصورة من أن يكون نسبة إلى عنصر الحاوية الأصل الذي يحتوي على تحديد موضع نسبي اقرب, أو فشل ذلك, لأن الهيئة.

على افتراض أن لدينا التعليمات البرمجية التالية مع شعبة وصورة داخله:

<div class="contenedor">
   <img class="imagen" src="" />
</div>

</div>

النمط الذي سيتم تطبيقه على الحاوية والصورة هو كما يلي:

.contenedor {
   position: relative;
}

.imagen {
   position:absolute;
   left:0px;
   right:0px;
   top:0px;
   margin:auto;
}

.contenedor {

position: relative;

}

.imagen {

position:absolute;

left:0px;

right:0px;

top:0px;

margin:auto;

}

لرؤية النتيجة مع بعض مثال, نحن ذاهبون إلى تعديل تعليمات HTML البرمجية عن طريق تعيين حافه ومن الحجم al div, فضلا عن إضافة الطريق ومن الحجم المصوره. سيبدو هكذا:

<div class="contenedor" style="border:1px solid orange;width:100%;max-width:500px;height:400px;">
   <img class="imagen" 
        src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg"
        style="width:200px;" />
</div>

<img class="imagen"

src="https://professor-falken.com/wp-content/uploads/2016/04/10-fondos-de-pantalla-para-que-uses-en-WhatsApp-Telegram-o-tu-aplicacion-de-mensajeria-favorita-Image-5-professor-falken.com_.jpg"

style="width:200px;" />

</div>

و, ثم, النتيجة: