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 that you have read and understand our privacy policy and code of conduct.

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