Question

我需要垂直对齐div#video1和div#video2内的文字。接近这个的方法是什么？这里<p>内的div#video1是否需要或有用？普兰克：https://plnkr.co/edit/gZ2xRBOk52F9Z1Pi4g7m?p=preview

这是html布局：

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <section id="video">
      <div class="container">
        <div id="video1">
                    <p>Lorem Ipsum is simply dummy text<br>Lorem Ipsum has been</p>
                </div>
        <div id="video2">
                    <p>
                        <span id="vid-pill">Text</span>
                        <br>
                        <span>Why do we use it?</span>
                        <br>
                        <span id="vid-text">Read the text</span>
                    </p>
        </div>
      </div>
    </section>
  </body>

</html>

和css规则：

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  background-color: #f4f4f4;
}

.container{
  width: 80%;
  margin :auto;
  overflow: hidden;
}

/* #video */
#video {
    padding: 15px;
}

#video #video1 {
    width: 70%;
    display: inline-block;
}

#video #video1 p {
    margin: 0 0 0 50%;
}

#video #video2 {
    display: inline-block;
    border-left: 3px solid #000;
    padding: 0 0 0 5%;
}

#video #video2 #vid-pill {
    background: tomato;
    display: inline-block;
    width: 40%;
    text-align: center;
    border-radius: 15px;
}

#video #video2 #vid-text {
    color: tomato;
}

Answer 1

始终用于垂直居中于另一个元素内的任何元素的万无一失/跨浏览器解决方案是在子元素上使用display: table/table-row/table-cell和vertical-align: middle。

请使用类似于表格的HTML结构：

<div class="like-table" style="height: 250px">
    <div class="like-table-row">
        <div class="like-table-cell valign-middle">
            <!-- Anything in this div will always get vertically center aligned -->
            <h1>This is vertically centered</h1>
        </div>
    </div>
</div>

使用CSS：

.like-table { display: table }
.like-table-row { display: table-row }
.like-table-cell { display: table-cell }
.valign-middle { vertical-align: middle }

P.S。我几乎在每个项目中都使用上面的CSS类。

Answer 2

请使用以下css使您的内容在DIV中垂直和水平居中

display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;

在</p> <div>内垂直对齐<p>

2 个答案: