桌面端图片在右侧，移动端居中显示。

Question

我正在使用Bootstrap制作一个网站。在我的Jumbotron中，左侧有一些文本，右侧有一张图片。在移动设备上，图片会出现在顶部。

在桌面上的样子： 在移动设备上的样子：
问题是，在移动设备上，如果图片居中而不是靠右浮动，会更好看。这可能吗？

HTML代码：

<div class="jumbotron">
  <div class="container" id="main">

    <div class="img"
        <p id="pic"><img id="pic" src="http://cube.crider.co.uk/visualcube.php?fmt=png&amp;size=800&amp;bg=t&amp;alg=F2%20D2%20L2%20F2%20L2%20F%20U2%20R2%20L%20U%27%20B%20D%27%20F%27%20U2%20L%20D2%20L2%20F2" width="300px" height="300px"></p> 
    </div>

    <h1>Example </h1>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>

  </div>
</div>

CSS：

.img{
  float: right;
  margin-right: 40px;
  margin-bottom: 20px;
  display: inline;
} 

示例网站

- Mikkel

---

亲爱的帖子编辑，我没有发布图片的原因是因为我声望不够。只是让您知道一下。谢谢！ - Mikkel

Answer 1

将以下代码添加到您的CSS中：

.img{
  float: right;
  margin-right: 40px;
  margin-bottom: 20px;
  display: inline;
} 

@media (min-width: 320px) and (max-width: 767px) {
    .img{
        float:none;
        display:table;
        margin: 0 auto;
    }
    }

或者

@media (max-width: 767px) and (min-width: 320px)
.img {
  /* float: none; */
  /* display: table; */
  margin: 0;
  width: 100%;
  TEXT-ALIGN: CENTER;
}

- Nitekurs

Answer 2

首先将您的文本用<div>标签包围起来：

<div id="textwithimg">
    <h1>Example </h1>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>
    <p>Example Example Example Example Example Example Example</p>
</div>

然后使用媒体查询：

//for mobile 
       @media (min-width: 400px) and (max-width: 500px) {
        .img{
            margin-left: auto;
            margin-right: auto;
            width: 70%;
            background-color: #b0e0e6;
            }
        }
    //normal css for any size 
          .img{
              float: right;
              margin-right: 40px;
              margin-bottom: 20px;
              display: inline;
           } 
           #textwithimg{
              desplay:inline;
              float:left;
            }

- Abdul Manan