Question

我所需要的只是桌面用户左侧的图像和移动用户的中心。请帮助!!!

＆＃13;

#name {
    text-align: center;
    font-family: cursive;
    color: orange;
    text-decoration: underline;
    text-decoration-style: double;
}
img {
    float: left;
    width: 75%;
    margin: 0 auto;
}
#info {
    text-align: center;
    border: 100px;
    border-color: red;
}

＆＃13;

<body>
        <h1 class="container-fluid" id="name">A.P.J. Abdul Kalam</h1>
        <div class="container-fluid">
                <div class="col-sm-4 col-xs-12">
                    <img src="./images/apjkalam.jpg" alt="A.P.J Abdul Kalam"
                     class="img-responsive center-block">
                </div>
                <div class="col-sm-4 col-xs-12">
                    <h4 id="info">General Info</h4>
                </div>
            </div>
        </div>
    </body>

＆＃13;

＆＃13; Image when viewed from mobile

Answer 1

在这种情况下，您需要为移动视图应用媒体查询。我从767px给出了示例，但您可以根据您的期望进行更改。您可以在CSS文件的底部添加这些行。

@media only screen and (max-width: 767px) { 
    img {
     float:none;
    }
}

Answer 2

用于在中央显示图像。您只需添加css样式margin: auto;和display:block;，如下所示。

@media only screen and (max-width: 767px) { 
   img {
     flaot: none;
     margin: auto;
     display:block;
   }
}

#name {
    text-align: center;
    font-family: cursive;
    color: orange;
    text-decoration: underline;
    text-decoration-style: double;
}
img {
    float: left;
    width: 75%;
    margin: 0 auto;
}
#info {
    text-align: center;
    border: 100px;
    border-color: red;
}
@media only screen and (max-width: 767px) { 
  img {
     float:none;
     margin: auto;
     display:block;
  }
}

<body>
        <h1 class="container-fluid" id="name">A.P.J. Abdul Kalam</h1>
        <div class="container-fluid">
                <div class="col-sm-4 col-xs-12">
                    <img src="./images/apjkalam.jpg" alt="A.P.J Abdul Kalam"
                     class="img-responsive center-block">
                </div>
                <div class="col-sm-4 col-xs-12">
                    <h4 id="info">General Info</h4>
                </div>
            </div>
        </div>
    </body>

浮左图像不在中心[响应式设计]

2 个答案: