在另一個

Question

所以我有這個fiddle

我想也保持個人資料圖片中，即使屏幕的寬度變小Materialise的圖像。 問題是與我的position:absolute所以margins:auto將無法​​正常工作。 而是我使用：left:40%。

任何想法？

Answer 1

水平和垂直居中，用你的代碼，你必須設置

• position:absolute + top/right/bottom/left:0 + margin:auto在img

#profile-page-header .card-image { 
 
    height: 225px; 
 
} 
 
#profile-page-header .card-profile-image img { 
 
    width: 110px; 
 
    position: absolute; 
 
    z-index: 1; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" /> 
 

 
<div class="row"> 
 
    <div class="col s12 m8"> 
 
    <div id="profile-page-header" class="card"> 
 
     <div class="card-image waves-effect waves-block waves-light"> 
 
     <img class="activator" src="http://static.vecteezy.com/system/resources/previews/000/094/491/original/polygonal-texture-background-vector.jpg" alt="user background"> 
 
     </div> 
 
     <figure class="card-profile-image"> 
 
     <img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator"> 
 
     </figure> 
 
     <div class="card-content"> 
 
     <div class="row"> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
      <br/> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您需要使用left:50%;然後使用margin-left:-55px;剩下的邊距是55，因爲您的寬度是110因此它是寬度的一半。

#profile-page-header .card-profile-image { 
    width: 110px; 
    position: absolute; 
    top: 190px; 
    z-index: 1; 
    left: 50%; 
    cursor: pointer; 
    margin-left: -55px; 
} 

https://jsfiddle.net/IA7medd/eL01jjf9/2/

Answer 3

您可以用position: absolute將實際圖像包裝在容器格中。由於父容器現在已絕對定位，所以.card-profile-image現在可以使用margin: auto。

https://jsfiddle.net/eL01jjf9/5/

#profile-page-header .card-profile-image-container { 
    width: 100%; 
    position: absolute; 
    top: 190px; 
    z-index: 1; 
} 
#profile-page-header .card-profile-image { 
    width: 110px; 
    cursor: pointer; 
    margin: auto; 
} 

`

<div class="card-profile-image-container"> 
 
    <figure class="card-profile-image"> 
 
    <img src="http://zblogged.com/wp-content/uploads/2015/11/21.jpg" alt="profile image" class="circle z-depth-2 responsive-img activator"> 
 
    </figure> 
 
</div>