1

Я создаю адаптивную страницу с помощью Bootstrap и SASS.

Столкнулся с проблемой - не получается центрирвоать maintext div и logo, при уменьшении размера экрана. Пробовал самые разные варианты с margin, left,right, clear, float, display, position и т.д. Что-то вроде такого например:

@media (max-width: 750px) {

    #maintext {
     margin-left: 0;
     margin-right: 0;

    }
}

Так же пробовал обернуть maintext div в другой div (centerhelper) и задать родительсому диву left 50% и maintext - left: -50%, примерно так:

@media (max-width: 750px) {
    .centerhelper {
        left: 50%;
    }

    #maintext {
     left: -50%;

    }
 }

Но высота centerhelper div была равна нулю, эксперимеентирвоал с разными вариантами display и position, но не получилось сделать так чтобы родительский див был высотой с div-потомка.

Вот мой HTML:

 <!-- NAVIGATION TOP -->
        <nav class="navbar my-navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">

     <!-- LOGO -->
              <a href="#" class="my-logo pull-left"><img src="img/Logo.png"></a> 
      <!-- LOGO -->          
               <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>

            </div>
            <div id="navbar" class="collapse navbar-collapse pull-right">
              <ul class="nav navbar-nav">
                <li><a href="#"><button class="navbutton active">Home</button></a></li>
                <li><a href="#"><button class="navbutton">About</button></a></li>
                <li><a href="#"><button class="navbutton">Services</button></a></li>
                  <li><a href="#"><button class="navbutton">Portfolio</button></a></li>
                <li><a href="#"><button class="navbutton">Blog</button></a></li>
                <li><a href="#"><button class="navbutton lastbutton">Contact</button></a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>

        <!-- NAVIGATION TOP END -->
        <!-- SHOWCASE -->  
          <section class="showcase">
            <div class="container showcase-content">

<!-- MAINTEXT DIV -->
               <div class="centerhelp"> <div id="maintext" ></div></div>
<!-- MAINTEXT DIV -->                
             </div>
          </section>
        <!-- SHOWCASE END -->

И CSS:

    .showcase {

      background-image: url(...);
      height: 380px;
      width: 100%;

    #maintext {
        padding: 0px;
        display: inline-block;
        float: left;

      margin-top: 91px;
      width: 430px;

        h1 {
            padding: 0;
            margin: 0;
        }
        p {
            padding: 0;
            margin: 0;
            }
        }
.my-logo {
  position: absolute;
  margin-top: 15px;
}
  img {
    width: 105px;
    height: auto;
  }

Возможно какая-то проблема с каскадным применением CSS правил, которую пока не могу поняь. Буду благодарен за совет как центрировать maintext div и Logo (ссылка с изображением внутри).

6
  • Пожалуйста, отформатируйте вопрос в соответствии со страницей справки, говорящей как создать минимальный воспроизводимый пример
    – VenZell
    18 авг 2016 в 14:20
  • @VenZell выше HTML и CSS, для работы не хватает только подключения bootstrap и работающих ссылок на картинки.
    – Rumata
    18 авг 2016 в 14:22
  • Вот видите, вы сами знаете, чего не хватает. Пожалуйста, облегчите работу отвечающим. Пусть хоть пример будет нормальный.
    – VenZell
    18 авг 2016 в 14:23
  • Я не понимаю какого результата вы хотите добиться. Центрировать div не сложно, но действительно ли это вам требуется?
    – Andrew B
    18 авг 2016 в 17:19
  • @AndrewB Да, мне нужно именно центрирвоать див. С логотипом уже получилось, с дивом с текстом почему-то нет, пытаюсь понять.
    – Rumata
    18 авг 2016 в 21:21

2 ответа 2

2

Посмотрите, подходил ли Вам такой вариант jsfiddle. Меняйте ширину окошка предпросмотра, чтобы посмотреть что получается.

<!-- NAVIGATION TOP -->
<nav class="navbar my-navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">

      <!-- LOGO -->
      <a href="#" class="navbar-brand"><img src="https://placehold.it/20x20" class="center-block"></a>
      <!-- LOGO -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

<!-- NAVIGATION TOP END -->
<!-- SHOWCASE -->
<section class="container">
  <div class="row">
    <div class="col-xs-offset-3 col-xs-6">
      <div class="maintext">Some text</div>
    </div>
  </div>
  <div class="maintext2">Some text</div>
  <div class="maintext3">Some text</div>

</section>
<!-- SHOWCASE END -->

@media(max-width: 768px) {
  .navbar-brand {
    display: block;
    float: none;
  }
  .navbar-header {
    position: relative;
  }
  .navbar-header > button {
    position: absolute;
    top: 8px;
    right: 15px;
    margin: 0;
  }
}

.maintext,
.maintext2,
.maintext3 {
  height: 100px;
  background-color: #eee;
  margin-bottom: 20px;
  padding: 5px;
}

.maintext2 {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.maintext3 {
  text-align: center;
}

Все, что обернуто в @media относится к центрированию логотипа для отображения на мобильном. Дальше 3 блока div (серый фон просто для наглядности). Первый сделан с помощью offset, второй со строго заданной шириной и авто центрированием, третий имеет ширину 100% (текст выровнен по центру).

Для отображения на экранах разного размера необходимо подкорректировать под вашу задачу.

1

Вам нужно центрирование только по горизонтали, или по вертикали тоже? С вертикалью отдельный разговор, а по горизонтали центрируется просто:

  1. Уберите все float и inline/inline-block у блока;
  2. max-width: 430px; Только макс-ширина, потому что на мобильных ширина у вас будет меньше;
  3. width: 100%; Пусть на мобильных блок занимает всю ширину;
  4. margin: 0 auto; Горизонтальные марджины ставим в auto, тем самым выравнивая блок по центру.
1
  • Спасибо, попробую. Мне нужно время чтобы все протестировать и разобраться с наслоением CSS, как только получится напишу.
    – Rumata
    18 авг 2016 в 21:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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