图像不居中Bootstrap center-block

Question

我无法将我的图像放在bootstrap提供的面板中：

这是我的html代码：

          <div class="row">
              <div class="col-lg-12">

                    <div class="col-lg-4">
                        <div class="panel panel-default">
                            <a class="modals" data-toggle="modal" data-target="#PatientDiagnosisModal"  href="">
                        <div class="panel-body"><img class="img-responsive  center-block" src="../img/diagnosis.png"></img></div>
                        <div class="panel-footer"><center>Patient Diagnosis</center></div></a>
                        </div>
                  </div>

                    <div class="col-lg-4">
                        <div class="panel panel-default">
                            <a class="modals" data-toggle="modal" data-target="#PatientDiagnosisModal"  href="">
                        <div class="panel-body"><img class="img-responsive  center-block" src="../img/diagnosis.png"></img></div>
                        <div class="panel-footer"><center>Patient Diagnosis</center></div></a>
                        </div>
                  </div>

                    <div class="col-lg-4">
                        <div class="panel panel-default">
                            <a class="modals" data-toggle="modal" data-target="#PatientDiagnosisModal"  href="">
                        <div class="panel-body"><img class="img-responsive  center-block" src="../img/diagnosis.png"></img></div>
                        <div class="panel-footer"><center>Patient Diagnosis</center></div></a>
                        </div>
                  </div>
            </div>
          </div>

如何克服这个问题？

Answer 1

Bootstrap有辅助类来居中元素：http://getbootstrap.com/css/#helper-classes-center

将类center-block添加到您的图片中，应该可以解决问题：

<div class="panel-body"><img class="img-responsive center-block" src="../img/diagnosis.png"></img></div>

Working example

如果它没有使用boostrap类，请尝试在css文件中添加自己的center-block类，然后将其添加到图像中：

.center-block {
    display: block;
    margin: 0 auto;
}

JSFiddle for this solution

Answer 2

Instid您可以使用<center>标记来实现此目标。这是一个简单的例子。

<center><div class="row"><img src="your image"/></div></center>

希望这有帮助！

Answer 3

写入CSS：

.panel.panel-default { margin: 0 auto !important; }