div内的内容垂直对齐

Question

我正在练习我的 css 和引导技能，并坚持中间内容的垂直和水平对齐方式。我确定我在这里遗漏了一些东西，但我无法找到它。

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

这是我的 HTML 结构。

 .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;

     }

为了将 li 包含在中间对齐，我给出了父表显示和内容表单元格显示。但它似乎不起作用。 有什么建议吗？？

Answer 1

.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>

Answer 2

    .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%);
    }