Question

该代码可在我的本地计算机上运行，但是当我将其保存在服务器上时，它将无法正常工作。我只是试图将div中的图像居中

  <div class="front-end">
<div class="panel panel-default">
  <div class="panel-heading title"><h4 style="text-align:left;">Front End</h4></div>
  <div class="panel-body">
    <div class="row" style="text-align: center;">
     <img id="mImg" src="./pictures/HTML5_Badge.png" alt="" style="width:90px;height:92px;">
     <img id="mImg" src="./pictures/css_badge.jpg" alt="" style="width:98px;height:100px;">
     <img id="mImg" src="./pictures/bootstrap_badge.png" alt="" 
              style="width:90px;height:92px;">
    </div>
  </div>
</div>

知道有什么问题吗？

Answer 1

您应该避免使用内联样式，而是将所有样式放入样式表中，这将使您的代码更易于管理。此外，您的所有3张图像都包含相同的ID，但IDs must be unique。您还缺少结尾</div>，这可能是导致问题的原因。

.panel-heading h4 {
  text-align:left;
}
.panel-body .row {
  text-align:center;
}
img#html5-badge {
  width:90px;
  height:92px;
}
img#css-badge {
  width:98px;
  height:100px;
}
img#bootstrap-badge {
  width:90px;
  height:92px;
}

<div class="front-end">
  <div class="panel panel-default">
    <div class="panel-heading title">
      <h4>Front End</h4>
    </div>
    <div class="panel-body">
      <div class="row">
        <img id="html5-badge" src="http://placehold.it/180x184" alt="" />
        <img id="css-badge" src="http://placehold.it/196x200" alt="" />
        <img id="bootstrap-badge" src="http://placehold.it/180x184" alt="" />
      </div>
    </div>
  </div>
</div>

图片位于本地主机上，但不在实时服务器上

1 个答案: