Bootstrap 3を使用してカタログを作成します。製品画像はタブレットで表示すると、サイズが小さく（500x500）、ブラウザーでの幅が767ピクセルであるため、見苦しく見えます。画面中央に配置したいのですが、どういうわけかできません。誰が問題を解決する手助けをしますか？
回答:
Bootstrap v3.0.1以降を使用している場合は、代わりにこのソリューションを使用してください。カスタムCSSでBootstrapのスタイルをオーバーライドするのではなく、代わりにBootstrap機能を使用します。
私の元の答えは後世のために以下に示されています
これは快適な修正です。.img-responsiveBootstrapから既にが設定されているためdisplay: block、を使用margin: 0 autoしてイメージを中央に配置できます。
.product .img-responsive {
margin: 0 auto;
}margin: 0 auto.img-sensitiveを変更するよりも、で新しいクラスを作成する方が良いでしょう。
.center-blockTwitter Bootstrap 3（v3.0.1以降）にはクラスがあるため、以下を使用します。
<img src="..." alt="..." class="img-responsive center-block" />class="img-responsive" style="margin: 0 auto;"私にとってclass="img-responsive center-block"はうまく
<a href="#"> </a>ペアでラップされている場合、クリック可能な領域は、画像よりもかなり大きくなる可能性のある囲んでいるコンテナの全幅に拡大されます。これは、「空の」スペースだと思うものをクリックするユーザーを混乱させるかもしれません。
クラスのみをcenter-blockイメージに追加します。これはBootstrap 4でも機能します。
<img src="..." alt="..." class="center-block" />注：を使用しcenter-blockても機能しimg-responsiveます
.text-centerBootstrap 3を使用している場合は、クラスを使用してください。
<div class="text-center">
<img src="..." alt="..."/>
</div>注：これはimg-sensitiveでは機能しません
img-responsive
@media (max-width: 767px) {
img {
display: table;
margin: 0 auto;
}
}display: table？もう仕事にdisplay: blockは十分です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最も簡単なソリューションです。
このコードを試してみてください。ブートストラップ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>これを試して：
.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><div class="col-md-12 text-center">
<img class="img-responsive tocenter" />
</div>。
<style>
.tocenter {
margin:0 auto;
display: inline;
}
</style>あなたはmargin：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>標準クラスのみを使用してすべてのBooostrapオブジェクトに適用されるより正確な方法は、上部と下部のマージンを設定しないことです（画像がこれらを親から継承できるため）。
.text-center .img-responsive {
margin-left: auto;
margin-right: auto;
}私はそのために要旨も作成しました。そのため、バグのために変更が適用される場合、更新バージョンは常にここにあります：https : //gist.github.com/jdrda/09a38bf152dd6a8aff4151c58679cc66
これまでのところ、受け入れる最善の解決策はのようです<img class="center-block" ... />。しかし、どのようにcenter-block機能するかについては誰も言及していません。
例としてBootstrap v3.3.6を考えます：
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}dispalyfor のデフォルト値は<img>ですinline。値blockは、要素をブロック要素（など<p>）として表示します。新しい行から始まり、幅全体を占めます。このように、2つのマージン設定により、画像は水平方向の中央に留まります。
:)