垂直中心応答画像Div - MaterializeCSS

私はMaterializeCSSを使用していますが、テキストを2つのdiv列に配置しようとしていますが、どちらの列の最大高さテキストまたはイメージ）。重要なのは、イメージが再構成され、応答性の高い大きな円形イメージです。私は以下のレイアウトを試しましたが、イメージが上に浮かんでいて、行の中に垂直に配置されていません。誰か助けてください。垂直中心応答画像Div - MaterializeCSS

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

出典

2017-08-18 user1149620

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <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>

私はその横ではなく、テキストの上に画像が表示されていることを利用したときに

出典

2017-08-18 23:49:00 Bitfighter

おかげで私はできませんそれが働くように思える。 – user1149620

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <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"> 
 
    \t #img:hover { 
 
    \t \t background-image: url('https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png'); 
 
    \t } 
 
    </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>

出典

2017-08-19 09:11:26 Bitfighter

垂直中心応答画像Div - MaterializeCSS

答えて

関連する問題