Есть сайт
Необходимо, чтобы текст Каталог (в левом верхнем углу) (блок .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">×</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
)