CODEWITHSUNDEEP
htmlcss
Alb
Alb

Reputation: 221

Center image and keep it at bottom

I'm having an issue with keeping an image at the bottom of my sidebar. When I'm able to center it, it wants to join the higher-up links and won't come down, and when I force it to the bottom, I can't get it to center without dangerous margin hacks. 

.sidebar {
  height: 100vh;
  max-width: 25%;
  float: left;
  font-family: 'Pontano Sans', sans-serif;
  position: fixed;
 }

  .sidebar li:nth-of-type(1) {
        padding-top: 10%;
      }


.sidebar li {
  color: #8B2500;
  margin-top: 40px;
  list-style: none;
  text-align: center;
  margin-left: -35px;
  font-size: 20px;
}
  #add {
    display: block;
    margin: 0 auto;
    bottom: 0;
    position: absolute;
    width: 80px;
    height: 80px;
  }

The html :

<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
            <ul>
                <li> <a href="#"> About </a></li>
                <li> <a href="docs.html"> Providers </a></li>
                <li> <a href="#"> Quality </a> </li>
                <li> <a href="#"> Contact </a> </li>
            </ul>
            <img id="add" src="images/phoner.png"></img>
        </nav>

The image in question is the #add. Position: absolute; brings it to the bottom as desired, but floats it left, and position: relative; brings it center as desired, but pulls it from the bottom. Any input appreciated, thanks.

Upvotes: 0

Views: 735

Answers (4)

rick jan cawaling
rick jan cawaling

Reputation: 440

You are nearly there, the trick in positiong element at the center, when you are using position: absolute is by adding a left,top,right,bottom a 50% and substract the half of the size of the element you want to center. In your case you just need to

CSS

#add {
    display: block; // remove
    margin: 0 auto; // remove
    bottom: 0;
    left: 50%; //added
    margin-left: -40px; //added
    position: absolute;
    width: 80px;
    height: 80px;
  }

see my sample fiddle

Upvotes: 5

isherwood
isherwood

Reputation: 61079

Can you add a container element? That would prevent you from needing explicit sizing or margins.

.sidebar {
  height: 80vh;
  max-width: 25%;
  position: fixed;
  background: pink;
  min-width: 300px;
  min-height: 150px;
}
.stuck-centered {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;

}
#add {
  display: block;
  margin: 0 auto;
}
body {
  padding: 30px;
}
<nav class="sidebar">
  <ul>
    <li><a href="#">About</a></li>
  </ul>
  <div class="stuck-centered">
    <img id="add" src="http://placehold.it/80x80"></img>
  </div>
</nav>

Full demo

Upvotes: 1

Lieutenant Dan
Lieutenant Dan

Reputation: 8284

.COOLelement{ 
    position:fixed; 
    margin:0 auto; 
    bottom:0;
    width: 100px; 
    height: 10px; 
}

Upvotes: 1

Bilal Maqsood
Bilal Maqsood

Reputation: 1246

try this it should work 

<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
            <ul>
                <li> <a href="#"> About </a></li>
                <li> <a href="docs.html"> Providers </a></li>
                <li> <a href="#"> Quality </a> </li>
                <li> <a href="#"> Contact </a> </li>
            </ul>
            <div class="clear"></div>
            <img id="add" src="images/phoner.png"></img>
        </nav>

.sidebar {
  height: 100vh;
  max-width: 25%;
  float: left;
  font-family: 'Pontano Sans', sans-serif;
  position: fixed;
 }

  .sidebar li:nth-of-type(1) {
        padding-top: 10%;
      }


.sidebar li {
  color: #8B2500;
  margin-top: 40px;
  list-style: none;
  text-align: center;
  margin-left: -35px;
  font-size: 20px;
}
  #add {
     bottom: 0;
    display: block;
    margin: 0 auto;
    bottom: 0;
    position: absolute;
    width: 80px;
    height: 80px;
  }
.clear{
  clear: both;
}

Upvotes: 1

Related Questions