Question

我正在使用MaterialiseCSS，我试图将图像放在一些文本旁边的2个div列中，我希望两者都垂直居中到任一列的最大高度（文本或图像）。如果重要的是图像是一个大的圆形图像，它会被重新塑造并且应该是响应的。我尝试了下面的布局，但图像浮动到顶部，并没有垂直居中的行，请有人帮忙。

<div class="row">
<div class="col l3 m3 s3" style="height:100%">
    <div class="valign-wrapper">
        <img class="responsive-img valign-wrapper" src="image.png">
    </div>
</div>
<div class="col l9 m9 s9">
    <div class="valign-wrapper" style="vertical-align: middle;">
      <p class="flow-text">Some text here that may be longer or shorter than the image depending on resolution of browser...</p>
    </div>
</div>

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<title>test</title>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">

</head>
<body>
<div class="container">
      <div class="col s12 m8 offset-m2 l6 offset-l3 hoverable">
        <div class="card-panel grey lighten-5 z-depth-1">
          <div class="row valign-wrapper">
            <div class="col s2">
              <img src="https://www.planwallpaper.com/static/images/9-credit-1.jpg" alt="" class="circle responsive-img">
            </div>
            <div class="col s10">
              <span class="black-text">
                This is a square image. Add the "circle" class to it to make it appear circular.
              </span>
            </div>
          </div>
        </div>
      </div>
</div>

</body>
</html>

＆＃13;

Answer 2

<!DOCTYPE html>
<html>
<head>
	<title>test</title>

  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
  <style type="text/css">
  	#img:hover {
  		background-image: url('https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png');
  	}
  </style>
</head>
<body>
<div class="container">
      <div class="col s12 m8 offset-m2 l6 offset-l3 hoverable">
        <div class="card-panel grey lighten-5 z-depth-1" id="img">
          <div class="row valign-wrapper">
              <span class="black-text">
                This is a square image. Add the "circle" class to it to make it appear circular.
              </span>
            </div>
        </div>
      </div>
</div>

</body>
</html>

Div中的垂直中心响应图像 - MaterialiseCSS

2 个答案: