Question

我写了这个html/css代码（link in jsfiddle）

我的图片显示在右侧或左侧，但我希望在中间栏显示。

我该怎么做？

Answer 1

更新css和html在text-center中添加一个类row，然后从float:right删除div.polaroid，这就是为什么你的图片框正确对齐请更新css部分就像下面将盒子放在中心一样。

工作小提琴还包括

<强> fiddle link

＆＃13;

img {
  max-width: 100%;
}

div.polaroid {
  width: 150px;
  height: 150px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
  margin-top: 5px;
  margin-left: 5px;
  float: none;
  display: inline-block;
  border-style: solid;
  border-width: 1px;
}

div.polaroid img {
  height: 100px;
}

div.containerq {
  padding: 10px;
}

＆＃13;

<body dir="rtl">
  <div class="container-fluid">
    <div class="row text-center">
      <div class="visible-xs col-xs-12">
        <a href="index3.php?id=9">
          <div class="polaroid">
            <img src="http://anubis.ir/logo.jpg" alt="Norway" style="width:100%">
            <div class="containerq">1</div>
          </div>
        </a>
        <a href="index3.php?id=9">
          <div class="polaroid">
            <img src="http://anubis.ir/logo.jpg" alt="Norway" style="width:100%">
            <div class="containerq">2</div>
          </div>
        </a>
      </div>
    </div>
  </div>
</body>

＆＃13;

html div从右到中在bootstrap中

1 个答案: