Question

我正在创建一个小网站，我想将其设计保留在平板电脑/移动版本中。这就是我所拥有的：

这就是我想要的：

居中 - 位于页面中间：

当我调整窗口大小时，图像和文本也会调整大小，当它们无法放在同一行上时，就像这样：

我设法做了类似的事情但是当我调整窗口大小时，图像和文本一个接一个，然后文本在第二行。

代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
  
<div class="row">
  <div class=" s12 m4 l3">
    <img src = "http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" height="111" width="300"/>
  </div>
  
  <div class=" s12 m4 l3">
    <h4> This is an example of, <br> image and text on the same line </h4>
  </div>
</div>

我跟随其他人在其他帖子中提出的建议，但他们的建议搞砸了我的设计。

Answer 1

最终代码（在JsFiddle上测试）：

@media only screen and (max-width: 780px){

:not(h4){
    text-align: center;
}


body .s12{
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-size: 25px;
    margin-top: 0%;
    text-align: left;
}

#div1{
    margin-top: 20%;
}

}



:not(h4){
     text-align: center; 
}


.s12{
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin-top: 20%;
}

<html>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
  
<div class="row">
  <div class=" s12 m4 l3" id="div1">
    <img src = "http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" height="111" width="300"/>
  </div>
  
  <div class=" s12 m4 l3" id="div2">
    <h4> This is an example of image, <br> with text on the same line </h4>
  </div>
</div>
</body>
</html>

Answer 2

https://jsbin.com/cavuracegu/1/edit?html,css,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>


<div class="container">
<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12" style="display: table;position: absolute;height: 100%;width: 100%;">
<div style="display: table-cell;vertical-align: middle;">
    <img style="display: inline-block" src = "http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" width="50%"/>
      <h4 class="text" style="width: 45%;display: inline-block;word-wrap:break-word;"> This is an example of, image and text on the same line </h4>
  </div>
  </div>
  </div>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
</div>
</body>
</html>
<style>
@media (max-width: 600px) {
  .text {
    font-size: 14px;
  }
}


  .text {
    vertical-align: middle;
  }
</style>

如何垂直放置图像和两行文本，并在它们不适合同一行时包装它们（在移动时）

2 个答案: