web-dev-qa-db-ja.com

レスポンシブイメージ調整センターブートストラップ3

Bootstrap 3を使用してカタログを作成しました。タブレットに表示すると、サイズが小さい（500 x 500）、ブラウザの幅が767ピクセルのため、製品の画像は見苦しく見えます。画面の中央に画像を置きたいのですが、どういうわけかできません。誰が問題を解決するのを助けるでしょうか？

enter image description here

htmlcssimagetwitter-bootstrapalignment
398
Konstantin Rusanov

Bootstrap v3.0.1以降を使用している場合は、代わりに この解決策 を使用してください。カスタムCSSでBootstrapのスタイルを上書きするのではなく、代わりにBootstrap機能を使用します。

後世の私の最初の答えは以下の通りです

これは楽しく簡単な修正です。 Bootstrapの.img-responsiveはすでにdisplay: blockを設定しているので、イメージの中央にmargin: 0 autoを使用できます。

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

Twitter Bootstrap 3には .center-block というクラスがあります（ v3.0.1以降 ）ので、次のようにします。

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

クラスcenter-blockのみを画像に追加します。これはBootstrap 4でも同様に機能します。

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

注：center-blockが使用されている場合でもimg-responsiveは機能します

99
Harry Bosh

Bootstrap 3を使用している場合は.text-centerクラスを使用してください。

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

注：これはimg-sensitiveでは機能しません

31
Sai Kiran Sripada

これにより、画像が中央に配置され、反応がよくなります。

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

私はもっ​​と「抽象的な」分類を提案するでしょう。 .img-sensitiveクラスと組み合わせて使用​​できる新しいクラス "img-center"を追加します。

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

このスタイルクラスの他の画像に影響を与えずに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が最も簡単な解決策です。

3
KannarKK

これを試して：

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

3
Rafiqul Islam

すでに与えられた答えに加えて、img-responsiveをimg-thumbnailと組み合わせて持つことはdisplay: blockをdisplay: inline blockに設定します。

2
M. Oranje

このコードを試してみてください。小さなブロックでもブートストラップ4でうまくいくでしょう。なぜなら、中央ブロッククラスがブートストラップ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>
2
faseeh
<div class="col-md-12 text-center">
    <img class="img-responsive tocenter" />
</div>

。

<style>
   .tocenter {
    margin:0 auto;
    display: inline;
    }
</style>
2
user956584
@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}
2
Ahmed

すべての画像のサムネイルを単純に次のようにrow/col div内に配置します。

<div class="row text-center">
 <div class="col-12">
  # your images here...
 </div>
</div>

そして、すべてがうまくいくでしょう！

1
Power Engineering

これまでのところ受け入れられる最善の解決策は<img class="center-block" ... />のようです。しかしcenter-blockがどのように機能するかについては誰も言及していません。

例えばBootstrap v3.3.6を見てください。

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

<img>のdispalyのデフォルト値はinlineです。値blockは、要素をブロック要素として表示します（<p>のように）。新しい行から始まり、全幅を占めます。このように、2つの余白設定により、画像は水平方向の中央に留まります。

0
themefield

標準クラスのみを使用してすべてのBooostrapオブジェクトに適用されるより正確な方法は、上下の余白を設定しないことです（imageは親からこれらを継承できるので）、それで私はいつも使っています：

.text-center .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

私はそれについても要点を述べました、それで、どんなバグのためにどんな変更でも適用されるならば、更新版は常にここにあります： https://Gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66

0
LordMagik

マージンを定義して修正できます：0 auto

または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>

0
Ganesh Putta