Question

我需要将屏幕垂直划分为两半（彼此相邻），我需要在上半部分的中间（水平和垂直）显示文本，并且需要显示一个列表（将使用javascript动态创建））下半场。我创建了一个父div和2个子div。但内容并没有放在中间。

<!DOCTYPE html>
<html>
    <head>
        <title>VOD</title>
        <script src='js/index.js'></script>
        <style>
            html, body
            {
                height:100%
            }

            #mid
            {
                position: fixed;
                top: 50%; left: 50%;
                z-index: 2;
                min-width: 100%;
                min-height: 100%;
                width: auto;
                height: auto;
                transform: translate(-50%, -50%);
                background-color: rgba(255, 255, 255 ,0.5);
            }

            #mid1
            {
                float:left;
                width:50%;
                height:100vh;
                overflow:hidden;
                text-align: center;
            }

            #mid2
            {
                float:left;
                width:50%;
                height:100vh;
                overflow:hidden;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id='mid' style="display:none">
            <div id="mid1">
                <h2>text1</h2>
            </div>
            <div id="mid2">
                <h2>text2</h2>
            </div>
        </div>
    </body>
</html>

div＆＃39; mid＆＃39;应仅在用户按下按钮时显示。所以我把显示为无，它将在javascript中启用。仅仅为了测试我也把文本放在第二个div中。任何人都可以帮我解决这个问题吗？

Answer 1

您可以使用flexbox来完成此任务：

#mid {
  display: flex;
  height: 100vmin;
  justify-content: stretch;
  flex-flow: row nowrap;
  background: blueviolet;
}

#mid-one, #mid-two {
  flex: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#mid-one {
  background: red;
}

#mid-two {
  background: blue;
}

工作笔：https://codepen.io/manAbl/pen/WJqRKR?editors=0100;

希望有帮助：）

如何在div的中间显示文本并在相邻div的中间显示列表？

1 个答案: