1

So I'm having this fiddle

I am trying too keep the profile picture in middle, even when screen width gets small. The problem is with my position:absolute so margins:auto won't work. Instead I used :left:40%.

Any ideas?

dippas
  • 58,591
  • 15
  • 114
  • 126
user6346756
  • 59
  • 11
  • sincerelly, I don't know who was the first who answered at this question. That person deserves an "Accept question" – user6346756 May 22 '16 at 12:01
  • I accepted another version because in yours, the profile pic is not aligned horizontally – user6346756 May 22 '16 at 12:02
  • sorry but it is. and you can see the actual time by hovering the hours of the answer, and actually you'll notice 9 minutes of difference between those 2 answers if thats your decisive term for choosing – dippas May 22 '16 at 12:03
  • ok, I accepted your answer because. The profile pic is horizontally aligned, but not perfectly(the image is positioned with some pixels up) – user6346756 May 22 '16 at 12:10

3 Answers3

1

to center horizontally and vertically, using your code, you have to set

  • position:absolute + top/right/bottom/left:0 + margin:auto in 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>
dippas
  • 58,591
  • 15
  • 114
  • 126
0

you need to use left:50%; then use margin-left:-55px; the margin left is 55 because your width is 110 so it is half of width.

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

Ahmed Salama
  • 2,795
  • 1
  • 11
  • 15
0

You can wrap the actual image within a container div with position: absolute. As the parent container is now absolutely positioned, .card-profile-image can now use 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>
Muhan Alim
  • 479
  • 1
  • 7
  • 17
  • so `figure`isn't enough as wrap? or the others above? – dippas May 21 '16 at 22:49
  • @dippas Correct me if I'm wrong but `figure` has other properties such as the width and `cursor: pointer` which you wouldn't need on the wrapper element. – Muhan Alim May 21 '16 at 22:52