Question

我使html页面的标题和徽标代码如下：

<div class="col-xs-12 col-sm-4 col-md-6" style="width:100%">
    <div class="widget text-center " style="margin-bottom: 60px">

      <div><img src="images/logo.jpg"  alt="BS" align="left" height=80px width=80px> </div>
      <h2 style="font-size: 29px">This is the best university in the  world</h2>
   </div>
</div>

我想将图像设置在图像的中心，并将h2标记内的文本设置在图像下方，以使屏幕尺寸小于 992 px 宽，但对于所有其他屏幕尺寸，将显示文本在图片旁边。我将如何使用CSS做到这一点？

Answer 1

<!DOCTYPE html>
<html>
<head>
    <style>
    .parentDiv{
        display: inline-block;
    }
    .parentDiv img{
        text-align: left;
        height: 80px;
        width: 80px;
    }
    .heading{
        font-size: 29px;
        display: inline-block;
    }
    @media only screen and (max-width: 992px) {
        /* For mobile phones: */
        .parentDiv{
            width: 100%;
            display: inline-block;
            text-align:  center;
        }
        .parentDiv img{
            text-align: center;
            height: 80px;
            width: 80px;
        }
        .heading{
            text-align: center;
            font-size: 29px;
            display: block;
        }
    </style>
</head>
<body>
    <div class="col-xs-12 col-sm-4 col-md-6" style="width:100%">
        <div class="widget text-center " style="margin-bottom: 60px;">
            <div class="parentDiv" ><img src="pexels.jpeg" alt="BS" > 
   </div>
            <div class="heading"><h2 style="">This is the best 
         university in the  
            world</h2></div>
        </div>
    </div>
</body>
</html>

Answer 2

我提供了一个Codepen（下面的URL），可将您的样式切换到断点之外，以便所有移动设备都可以使用它。现在，将在993px及更高的像素上调用断点，因此图像现在位于（浮动）在图像的左侧，文本位于（浮动）在图像的右侧。

@media only screen and (min-width: 993px) {
    /* For everything else: */
    .parentDiv {
        display: inline;
        width: auto;
    }
    .parentDiv img {
        float: left;
    }
    .heading {
        float: left;
    }
}

[Codepen]（https://codepen.io/sassquad/pen/zJRKYZ）

使用CSS使图像出现在移动视图的中心

2 个答案: