CODEWITHSUNDEEP
css
DevWL
DevWL

Reputation: 18860

How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height

How can I center vertically a div with position absolute and hight = 100px on another div with position relative but with not standard height (depends on image size).

Usually you would use top:50%;

It would will align it to the center but it wont take into account height of the div which is 100px, And because of that it looks totally not centered on a images that have for example 250px height.

HTML

  <div class="imgArea">
    <div class="img">
      <img class="img-responsive" src="http://img2.demotywatoryfb.pl//uploads/201311/1384452727_cipnyk_600.jpg" alt="img">
      <div class="btn-panel">
        <button type="button" class="btn btn-default btn-lg imgBtnLeft">
          <span class="glyphicon glyphicon-chevron-left"></span> Prev
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnRight">
           Next <span class="glyphicon glyphicon-chevron-right"></span>
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnLeft">
          <span class="glyphicon glyphicon-thumbs-down"></span> Słabe
        </button>
        <button type="button" class="btn btn-default btn-lg imgBtnRight">
           Mocne <span class="glyphicon glyphicon-thumbs-up"></span>
        </button>
      </div>
    </div>
    <p>Tutaj opis do zdjęcia który mówi wszystko!</p>
  </div>

CSS 

.imgArea {
  max-width: 800px;
  padding-bottom: 100px; }

.img {
  position: relative; }
  .img .btn-panel {
    position: absolute;
    top: 50%;
    width: 100%;
    z-index: 999; }

.imgBtnLeft {
  float: left;
  color: black;
  clear: left; }

.imgBtnRight {
  float: right;
  color: black;
  clear: right; }

Upvotes: 0

Views: 450

Answers (2)

DevWL
DevWL

Reputation: 18860

I have just worked it out. Sorry to bother you guys. 

.img {
  position: relative; }
.img .btn-panel {
    position: absolute;
    margin-top:-50px; //did the job when combined with top 50%
    top: 50%;
    width: 100%;
    z-index: 999; }

WORKS!

Upvotes: 0

Marcos
Marcos

Reputation: 531

You can use this css rule. The width and height of the element does not matter; it will be centered on the screen.

.centerDiv {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Upvotes: 1

Related Questions