桌面右侧的图像，以移动设备为中心

Question

我正在制作一个带引导程序的网站。在我的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;
} 

Example website

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;
}

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;
            }