CODEWITHSUNDEEP
cssmaterialize
user1149620
user1149620

Reputation: 873

Vertically Center Responsive Image In Div - MaterializeCSS

I am using MaterializeCSS and I am trying to put an image next to some text, in 2 div columns, and I would like both to be vertically centered to the maximum height of either column (text or image). If its important the image is a large circular image that gets reshaped and should be responsive. I have tried the below layout but the image floats to the top and is not vertically centered in the row, please could someone help.

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

Upvotes: 1

Views: 1232

Answers (2)

user8413951
user8413951

Reputation: 

<!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>

Upvotes: 1

user8413951
user8413951

Reputation: 

<!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>

Upvotes: 1

Related Questions