vertikal reagierendes Bild in Div - MaterializeCSS

Ich benutze MaterializeCSS und ich versuche, ein Bild neben einem Text, in 2 div Spalten, und ich möchte beide vertikal zentriert auf die maximale Höhe von jeder Spalte (Text oder Bild). Wenn es wichtig ist, ist das Bild ein großes kreisförmiges Bild, das neu geformt wird und reagieren sollte. Ich habe versucht, das Layout unten, aber das Bild schwebt nach oben und ist nicht vertikal in der Reihe zentriert, bitte könnte jemand helfen.vertikal reagierendes Bild in 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>

Quelle

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>

Quelle

2017-08-18 23:49:00 Bitfighter

Danke, aber wenn ich, dass das Bild über den Text erscheint anstatt es weiter und ich kann nicht scheinen es zur Arbeit zu bringen. – 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>

Quelle

2017-08-19 09:11:26 Bitfighter

vertikal reagierendes Bild in Div - MaterializeCSS

Antwort

Verwandte Themen