Css 垂直对齐<；p>；内部a<；部门>；_Css_Html_Alignment

Css 垂直对齐<；p>；内部a<；部门>；

css html

Css 垂直对齐<；p>；内部a<；部门>；,css,html,alignment,Css,Html,Alignment,我需要在div#video1和div#video2中垂直对齐文本。怎样才能做到这一点？div#video1中的在这里是必要的还是有用的？普朗克：以下是html布局： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head>

我需要在

div#video1

和

div#video2

中垂直对齐文本。怎样才能做到这一点？

div#video1

中的

在这里是必要的还是有用的？普朗克：

以下是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使您的内容在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;

简单/跨浏览器解决方案始终适用于在另一个元素中垂直居中任何元素，它是在子元素上使用

显示：表格/表格行/表格单元格

和

垂直对齐：中间

请使用类似以下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类。

flexbox？……我正在努力避免它。感谢您的帮助。我接受这个答案的原因是它没有使用flexbox，这是我一直在寻找的，在我的解决方案中，我也使用了table display。尽管我仍然想知道是否有一种不用表格的解决方案。

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

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