как отобразить текст в середине div и отобразить список в середине соседнего div? - PullRequest
Новая
       1

как отобразить текст в середине div и отобразить список в середине соседнего div?

0 голосов
/ 25 мая 2018

Мне нужно разделить экран на 2 половины по вертикали (рядом друг с другом), и мне нужно отобразить текст посередине (по горизонтали и вертикали) первой половины и мне нужно отобразить список (который будет создан динамически с использованием 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 'mid' должно отображаться только тогда, когда пользователь нажимает кнопку.Поэтому я поставил display как none, и он будет включен в javascript.И просто для тестирования я помещаю текст во второй div тоже.Может ли кто-нибудь помочь мне решить эту проблему?

1 Ответ

0 голосов
/ 25 мая 2018

Для этого можно использовать 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;

Надежда помогает:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...