0

Есть сайт

введите сюда описание изображения

Необходимо, чтобы текст Каталог (в левом верхнем углу) (блок .windowheader) располагался по центру содержащего его блока. Привожу код

#dropdownwindow {
    display: none;
    margin-left: 0;
    margin-right: 100%;
    height: 100vh;
    z-index: 5;
    /*display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
    "left search search search"
    "left right right right";
    grid-area: mainwindowpart;*/
}
    
#fullblock {
    height: 100vh;
    /*display: grid;*/
    /*grid-template-columns: 4fr 1fr;
    grid-template-areas: 
        "mainwindowpart freespace";*/
    position: static;
}

.contentdropdownwindow {
    display: flex;
    justify-content: center;
}

.CatalogMenuLeft {
    width: 20%;
    /*margin-left: auto;
    margin-right: auto;*/
}

.catalogheader {
    width: 100%;
    height: 20%;
    /*display: flex;*/
    /*justify-content: center;*/
    margin-left: auto;
    margin-right: auto; 
}

/*.flexelem {
    flex: 1;
    
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}*/

.crossline {
    flex: 1;
    /*width: 100%;*/
    height: 20px;
}

.windowheader {
    flex: 1;
    /*width: 100%;*/
    margin: auto;
    text-align: center;
}

.flexdisabledscrollbar1, .flexdisabledscrollbar2 {
    flex: 5px;
    border-right: 5px solid #ddd;   
}

.flexline1 {
    display: flex;
}

.flexline2 {
    display: flex;
}

.windowmenulist {
    
}
<div id="dropdownwindow">
        <!-- <div class="crossline">
            <div class="close">&times;</div>
        </div> -->
        <div class="contentdropdownwindow">
            <div class="CatalogMenuLeft">
                    <div class="catalogheader">
                            <div class="flexline1">
                                    <div class="crossline">
                                    </div>
                                    <div class="flexdisabledscrollbar1">
                                    </div>
                            </div>      
                            <div class="flexline2">     
                                    <div class="windowheader">
                                        <h4>Каталог</h4>
                                    </div>
                                    <div class="flexdisabledscrollbar2">
                                    </div>
                            </div>      
                    </div>
                            <div class="windowmenulist">
                                    <div >
                                        Смартфоны и гаджеты
                                    </div>
                                    <div>
                                        Ноутбуки и компьютеры
                                    </div>
                                    <div>
                                        Телевизоры, аудио-видео, Hi-Fi
                                    </div>
                                    <div>
                                        Бытовая техника для дома и кухни
                                    </div>
                                    <div>
                                        Строительство и ремонт
                                    </div>
                                    <div>
                                        Дом и дача
                                    </div>
                                    <div>
                                        Фото, видео, системы безопасности
                                    </div>
                                    <div>
                                        Автотовары
                                    </div>
                                    <div>
                                        Канцтовары, Мебель и Офисная техника
                                    </div>
                                    <div>
                                        Красота и здоровье
                                    </div>
                            </div>
            </div>
            <div class="myscroll">
            
            </div>
            <div class="centerdropdownwindow">
                    <div class="CatalogMenuSearch">
                    </div>
                    <div class="CatalogMenuRight">
                    </div>
            </div>
        </div>
<!--<div>-->        
<!--</div>-->
</div>

Замечание. Привожу еще скриншоты

введите сюда описание изображения

введите сюда описание изображения

введите сюда описание изображения

Есть еще нюанс, что все эти блоки на .dropdownwindow накладываются на блоки основной страницы (z-index для .dropdownwindow равно 5 , а для #pageHeader .headerinsides z-index равно 3) (судя по размерам блоков .catalogheader, .flexline1, .flexline2)

3
  • 2
    Мне кажется вам стоит переделать верстку. Как минимум запихивать в span блочные элементы нельзя. Commented 14 июл. 2021 в 12:53
  • Среди верстальщиков есть такое правило: в элементы со стилем display:inline , нельзя помещать элементы со стилем display:block. А вы в span кладёте div
    – HTO HOT
    Commented 14 июл. 2021 в 13:16
  • я обновил вопрос. Commented 14 июл. 2021 в 14:18

1 ответ 1

0

Используйте display: table; к родительскому элементу и display: table-cell; vertical-align: middle; к дочернему элементу.

.container {
  display: flex;
}

.windowheader {
  flex: 1;
  height: 200px;
  text-align: center;
  display: table;
  background-color: #eee;
}

h4 {
  display: table-cell;
  vertical-align: middle;
}
<div class="container">
  <div class="windowheader">
    <h4>Каталог</h4>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.