Как разместить надписи в центр каждой колонки при значении position fixed?

Question

[neeli]

Добрый день! У меня position fixed приклеил надписи к краям колонок. position fixed надо для того чтобы надпись не прокручивалась с колонкой. take.ms/zHfYI Есть ли способ закрепить данные надписи в центр каждой коллонки? Я что-то никак не справлюсь с этой задачей - попробую спросить у профи) Прикреплю код css и html take.ms/h5y2t

Comments

[iBird Rose]

Прикреплю код css и html

- у тебя есть код?
- лучше! у меня есть картинка кода!

[Astrohas]

iBird Rose: Картинка то битая

[iBird Rose]

Хасан Истамкулов: моя?

[Павел Антонов]

лол

[Mesuti]

Вот это боль)
Код в картинках слать...
Ну каждый с этого начинал, ничего страшного

[neeli]

Но у меня идет position fixed и там 3 колонки. Мне бы где где-то прописать что вот этот position fixed должен быть не в верхнем углу а каждый по середине контейнера. Сам код у меня идет так

<div class="container">
          <div id="content_">
             
            <div class="row">
             
          
          
          
     
       
                <div class="col-md-4 col-xs-12">
                    <h3 class="text-primary text-center">PAYABLE 3D-MODELS</h3>
                    
               [[!pdoPage?
    &element=`msProducts`
    &parents=`61`
    &pageVarKey=`altpagge`
    &pageNavVar=`altpagge.nav`

    
                  ]]
             [[!+altpagge.nav]]
            </div>
             
            

  <div class="col-md-4 col-xs-12">
      <h3 class="text-primary text-center">ALL 3D-MODELS</h3>
                [[!pdoPage?
    &element=`msProducts`
    &sortby=`RAND()`

                ]]
             [[!+page.nav]] 
               </div>
               
 
    
            <div class="col-md-4 col-xs-12">
                <h3 class="text-primary text-center">FREE 3D-MODELS</h3>
               [[!pdoPage?
    &element=`msProducts`
    &parents=`32`
    &pageVarKey=`altpage`
    &pageNavVar=`altpage.nav`

                ]]
             [[!+altpage.nav]]
            </div>
           </div>
           </div>

и вот кусок css идет так

.btn-default {margin-right: 10px;
    padding-bottom: 6px;
    margin-top: 20px;
    margin-bottom: -0px;
    padding-left: 10px;
    padding-right: 10px;
}

.ms2_form_ {margin-left: -20px}

.btn { border-radius: 40px; }

.col-md-10_ {
    margin-top: 0px; }
    
.col-md-4 { height:900px;
            overflow: auto;
            top:60px; 
        }


.text-primary { position:fixed;
               z-index: 101;
         top:60px;
         
}

@media (max-width:1024px){
.text-primary {
    position: relative;
    z-index: 101;
    top: 0px;
}
}

Answer 1

[Mesuti]

Пробовали один из вариантов? Как вариант попробовать в родительский div
text-center или justify-content-center

Comments

[neeli]

Александр Сорокин: Пока не пробовал. Я если честно пока туповат в как в css так и в html Кстати вы имеете ввиду вариант из картинки?

[Mesuti]

neeli: да.
Попробуйте поставить класс text-center или justify-content-center не в h3 заголовок, а в родительский элемент div

Будет так:

<div class="col-md-4 col-xs-12 text-center">
ИЛИ
<div class="col-md-4 col-xs-12 justify-content-center">

[Mesuti]

neeli: если не получится, то можете просто дать ссылку на страницу, посмотрю код

[neeli]

Александр Сорокин: И первый и второй вариант сжимает все до кучи почему то take.ms/L9ZSV

[Mesuti]

neeli: можете дать адрес страницы?
По изображению сложно ориентироваться.

[neeli]

dddmod.com пару минут и верну все назад ато я тут тестирую еще с вашим вариантом, там я забыл

[neeli]

Александр Сорокин: А вот так совсем исчез) take.ms/AWiMm

[Mesuti]

neeli: Сейчас посмотрю)

[Mesuti]

Не получается средствами bootstrap.
Пробовал обвернуть в div и текст и весь заголовок.
=)
Короче говоря вручаю костыль:

<h3 class="text-primary text-center" style="margin-left: 3%;">ALL 3D-MODELS</h3>

[Mesuti]

neeli: или лучше в rem указать, если в процентах будет криво работать)))

<h3 class="text-primary text-center" style="margin-left: 5rem;">ALL 3D-MODELS</h3>

[neeli]

Александр Сорокин: Вроде работает как надо!!!) первый вариант я прописал везде. Спасибо!) теперь все тип топ