所以我有fiddle
即使屏幕宽度变小,我也会尝试将个人资料图片保留在中间位置。
问题出在我的position:absolute
上,因此margins:auto
无法正常工作。
相反,我使用了:left:40%
。
有什么想法吗?
答案 0 :(得分: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>
答案 1 :(得分:0)
你需要使用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;
}
答案 2 :(得分:0)
您可以使用position: absolute
将实际图像包装在容器div中。由于父容器现在位于绝对位置,.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>
&#13;