-1

I am practicing my css and bootstrap skills and stuck with vertical and horizantal alignment of the contents in the middle. I am sure i am missing something here but i am not able to find it out. 

<div class="container">
    <div class="jumbotron">
        <h1>Heading here.</h1>
        <p>Some random text goes here.</p>
    </div>
</div>

<div class="parent container text-center">
    <div class="row child text-center">
        <ul class="list-inline lis">
            <li class="box par">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg"/>
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
        </ul>
    </div>
</div>

This is my HTML structure. 

 .box {
        background:#ff6a00;
        margin:10px;
        height:200px;
        width:200px;

    }

     li {
        list-style:none;
        display:inline;
         text-align:center;
    }
     .lis {
         height:100vh;
         width:100%;
     }
     .par {
         display:table;

     }
     .ch {
         display:table-cell;
         vertical-align:middle;

     }

To align the li contains in the middle, i gave the parent table display and the contents table-cell display. But its doesnt seem to work. Any advice??

Himakar Reddy
  • 73
  • 1
  • 1
  • 8
  • Check this question it was already asked: http://stackoverflow.com/questions/35513485/how-to-make-contents-vertical-align-inside-div – Sayed Rafeeq Jul 18 '16 at 10:51
  • Hi, Check this It will you. http://codepen.io/syedrafeeq/pen/aLEqI – Sayed Rafeeq Jul 18 '16 at 11:01
  • 2
    Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) – ShufflerShark Jul 18 '16 at 11:03

2 Answers2

0
    .box {
        background: #ff6a00;
        margin: 10px;
        height: 200px;
        width: 200px;
    }

    li {
        list-style: none;
        display: inline;
        text-align: center;
    }

    .lis {
        height: 100vh;
        width: 100%;
    } 
    .box{
        height: 200px;
    }

    .box a {
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
Pranjal
  • 1,088
  • 1
  • 7
  • 18
0

.box {
  background:#ff6a00;
  white-space: nowrap;
  vertical-align: top;
  margin:10px;
  height:200px;
  width:200px;
}
.list-inline .box:before {
  vertical-align: middle;
  display: inline-block;
  margin: 0 0 0 -5px;
  overflow: hidden;
  height: 100%;
  content: '';
  width: 1px;
}

li {
  list-style:none;
  display:inline;
  text-align:center;
}
.lis {
  height:100vh;
  width:100%;
}
.ch {
  vertical-align: middle;
  display: inline-block;
  white-space: normal;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="jumbotron">
        <h1>Heading here.</h1>
        <p>Some random text goes here.</p>
    </div>
</div>

<div class="parent container text-center">
    <div class="row child text-center">
        <ul class="list-inline lis">
            <li class="box par">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg"/>
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
            <li class="box par container">
                <a href="#" class="ch">
                    <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" />
                    <p>Something random again.</p>
                </a>
            </li>
        </ul>
    </div>
</div>
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95