html w3schools - صورة متجاوبة محاذاة مركز bootstrap 3




img tag (13)

جرب هذا:

.img-responsive{
    display: block;
    height: auto;
    max-width: 100%;
	  margin:0 auto;
}
.Image{
  background:#ccc;
  padding:30px;
}
<div class="Image">
  <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique">
</div>

أقوم بعمل كتالوج باستخدام Bootstrap 3. عند عرضه على الأجهزة اللوحية ، تبدو صور المنتج قبيحة بسبب صغر حجمها (500x500) وعرض 767 بكسل في المستعرض. أريد أن أضع الصورة في وسط الشاشة ، ولكن لسبب ما لا أستطيع. من سيساعد في حل المشكلة؟


للإضافة إلى الإجابات المقدمة بالفعل ، فإن وضع img-responsive reactive مع img-thumbnail سيؤدي إلى display: block display: inline block .


أود أن اقترح تصنيف أكثر "مجردة". إضافة فئة جديدة "img-center" والتي يمكن استخدامها مع فئة .img-responsive:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

لا يزال بإمكانك العمل مع img-responsive دون التأثير على صور أخرى باستخدام فئة النمط هذه.

يمكنك أن تسبق هذه العلامة بفئة id / div id / class لتعريف طلب داخل هذا img متداخل. ستعمل هذه img-responsive المخصصة فقط في هذا المجال.

لنفترض أن لديك منطقة HTML محددة على النحو التالي:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

بعد ذلك ، يمكن أن يكون CSS:

section#work .img-responsive{
    margin: 0 auto;
}

ملاحظة: هذه الإجابة مرتبطة بالتأثير المحتمل لتغيير img-responsive ككل. بالطبع ، center-block هو أبسط الحلول.


<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

.

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>

إذا كنت تستخدم Bootstrap v3.0.1 أو أكبر ، فيجب استخدام هذا الحل بدلاً من ذلك. لا يتجاوز أنماط Bootstrap مع CSS مخصص ، ولكن بدلاً من ذلك يستخدم ميزة Bootstrap.

يظهر جوابي الأصلي أدناه للأجيال القادمة

هذا هو حل سهل سهل. نظرًا لأن .img-responsive من Bootstrap بالفعل يعيّن display: block ، فيمكنك استخدام margin: 0 auto لتوسيط الصورة:

.product .img-responsive {
    margin: 0 auto;
}

يمكنك إصلاحه مع تحديد الهامش: 0 تلقائي

أو يمكنك استخدام col-md-offset أيضًا

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style>
.img-responsive{
margin:0 auto;
}
</style>
<body>

<div class="container">
  <h2>Image</h2>
<div class="row">
<div class="col-md-12">
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <img src="http://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>
</div>
</div>

</body>
</html>


جرب هذه الشفرة التي ستعمل مع الأيقونات الصغيرة أيضًا مع bootstrap 4 نظرًا لعدم وجود فئة كتلة مركزية هي bootstrap 4 ، لذا جرّب هذه الطريقة سيكون مفيدًا. يمكنك تغيير موضع الصورة عن طريق تعيين .col-md-12 إلى .col-md-8 أو .col-md-4 ، فهو يصل إليك.

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>

أضف فقط center-block الفصل إلى صورة ، وهذا يعمل مع Bootstrap 4 أيضًا:

<img src="..." alt="..." class="center-block" />

ملاحظة: لا يعمل center-block عند استخدام img-responsive


يجب أن يركز هذا على الصورة بالإضافة إلى جعلها سريعة الاستجابة.

<img src="..." class="img-responsive" style="margin:0 auto;"/>

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

فقط استخدم فئة .text-center إذا كنت تستخدم Bootstrap 3.

<div class="text-center">
    <img src="..." alt="..."/>
</div>

ملاحظة: لا يعمل هذا مع img-responsive


لقد واجهت نفس الموقف حيث كنت أرغب في محاذاة بعض عناصر div رأسيًا على التوالي ووجدنا أن فئات Bootstrap col-xx-xx تطبق أسلوب div على النحو float: left.

اضطررت إلى تطبيق النمط على عناصر div مثل style = "Float: none" وبدأت جميع عناصر div الخاصة بي بمحاذاة رأسية. هذا مثال العمل:

<div class="col-lg-4" style="float:none;">

رابط JsFiddle

فقط في حالة ما إذا كان هناك من يريد قراءة المزيد عن الخاصية العائمة:

W3Schools - تعويم





html css image twitter-bootstrap alignment