Как центрировать мои встроенные кнопки, используя z-index и абсолютное позиционирование? - PullRequest
Новая
       8

Как центрировать мои встроенные кнопки, используя z-index и абсолютное позиционирование?

0 голосов
/ 29 августа 2018

Я настроил слайдер Slick для отображения карусели изображений для моей страницы входа. Я читал, что для того, чтобы на карусели были кнопки, мне нужно было использовать position: absolute и z-index: 1 в моем CSS. Это позволило мне сделать так, чтобы моя карусель занимала всю область просмотра, но я не могу переместить свои кнопки или даже расположить их по центру. Обычно это будет text-align: center; для центрирования кнопок, но в этом случае это не работает. Я использую мобильную библиотеку jQuery.

Как изменить положение кнопок, чтобы они всегда отображались в центре области просмотра, а также, возможно, изменить ширину кнопок?

Изображение Desc. A. Моя страница входа в минуту. B. Где бы я хотел, чтобы мои кнопки были, желательно, чтобы они занимали% от области просмотра. C & D. Я могу центрировать кнопки в инструментах разработчика, когда выключаю абсолютное позиционирование, но это толкает мой виджет-слайдер вниз и не позволяет кнопкам перемещаться вперед по z-index. 2

HTML: 

<body>

<!-- Buttons -->
<div id="LandingButtons">
    <button class="ui-btn ui-btn-inline">Sign Up</button>
    <button class="ui-btn ui-btn-inline">Log In</button>
</div>

<!-- HTML for images -->
<div class="your-class" ">
      <div> <img src="img/slider/step1.png " alt=" " style="width: 100vw; height: 100vh; "></div>
      <div> <img src="img/slider/step2.png " alt=" " style="width: 100vw; height: 100vh; "></div>
      <div> <img src="img/slider/step3.png " alt=" " style="width: 100vw; height: 100vh; "></div>
      <div> <img src="img/slider/step4.png " alt=" " style="width: 100vw; height: 100vh; "></div>
    </div>


<!-- slick.js -->
<script type="text/javascript " src="http://code.jquery.com/jquery-1.11.0.min.js "></script>
<script type="text/javascript " src="http://code.jquery.com/jquery-migrate-1.2.1.min.js "></script>
<script type="text/javascript " src="slick/slick.min.js "></script>


<!-- External JS file Initializes the slider  -->
<script type="text/javascript " src

CSS: 

#LandingButtons{
    text-align: center;
    position: absolute;
    z-index: 1;
}

Ответы [ 3 ]

0 голосов
/ 30 августа 2018

Похоже, вы забыли использовать поле авто, которое поможет вам выровнять div по центру: #LandingButtons{ text-align: center; Margin: 0 auto; }

0 голосов
/ 30 августа 2018

Если вы хотите центрировать свой элемент по горизонтали и вертикали, вы можете использовать этот код, он должен вам помочь. Кроме того, если что-то позиционируется абсолютно, вам не нужно использовать z-index. 

.center-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Этого должно быть достаточно, и если вы используете абсолютное положение для этого div, не забудьте установить относительное положение для div, к которому он должен быть расположен.

0 голосов
/ 29 августа 2018

Вы можете сделать это с помощью преобразования: translateY (-50%); и верх: 50% комбинация, чтобы получить его в середине экрана 

#LandingButtons {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}

Я надеюсь, что это поможет вам

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...