Элемент CSS не в строке

.slide{
    display: block;
    font-size: 16px;
    line-height: 20px;
    padding: 7px 4px;
    cursor: pointer;
    height: 32px;
    width: 32px;
    margin: 5px auto;
    background-color: #2874f0;
    border-radius: 50%;
    color: #fff;
    text-align: center;
}

<a class = "slide"><</a>
<a class = "slide">></a>

Пожалуйста, помогите мне. Как мне добавить обе кнопки в один ряд с выравниванием по центру? Сейчас кнопка 1 находится сверху, а кнопка 2 - в нижнем колонтитуле. Как я могу решить эту проблему?

используйте display:inline-block и установите text-align:center в родительском классе

— 30.03.2018 14:07

html css

30.03.2018 14:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

235

Ответы 6

div.arrow {
  text-align: center;
}

.slide {
  display: inline-block;
  font-size: 16px;
  line-height: 20px;
  padding: 7px 4px;
  cursor: pointer;
  height: 32px;
  width: 32px;
  margin: 5px auto;
  background-color: #2874f0;
  border-radius: 50%;
  color: #fff;
  text-align: center;
}

<div class = "arrow">
  <a class = "slide"><</a>
  <a class = "slide">></a>
</div>

30.03.2018 14:08

Я советую вам использовать Flexbox, это очень хороший инструмент для выравнивания элементов и создания адаптивных веб-страниц. Вы можете найти руководства здесь или здесь, которые очень ясны и дадут вам передовой опыт.

.container{
    display:flex;
    justify-content:center;
}

.slide{
    display: block;
    font-size: 16px;
    line-height: 20px;
    padding: 7px 4px;
    cursor: pointer;
    height: 32px;
    width: 32px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #2874f0;
    border-radius: 50%;
    color: #fff;
    text-align: center;
}

<div class = "container">
    <a class = "slide"><</a>
    <a class = "slide">></a>
</div>

30.03.2018 14:11

Изменения в классе Slide:

display: inline-block;
line-height: 30px;
padding: 0px 0px;

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

30.03.2018 14:24

Вам следует использовать флексбоксы:

section#slider_buttons {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
}

section.button {
    display: inline-flex;
    display: -webkit-inline-flex;
    height: 32px;
    width: 32px;
    cursor: pointer;
    border-radius: 50%;
    background-color: #2874f0;
    color: white;
}

section.button a {
    display: block;
    text-align: center;
    margin: auto; /* Important */
}

<section id = "slider_buttons">
    <section class = "button">
        <a>&lt;</a>
    </section>
    <section class = "button">
        <a>&gt;</a>
    </section>
<section>

30.03.2018 14:50

У вас есть два варианта.

1) Добавьте BootStrap или аналогичный фреймворк и оберните две ссылки в div с классом строки.

2) Измените настройку отображения CSS на встроенный блок

.slide{
    display: inline-block;
    font-size: 16px;
    line-height: 20px;
    padding: 7px 4px;
    cursor: pointer;
    height: 32px;
    width: 32px;
    margin: 5px auto;
    background-color: #2874f0;
    border-radius: 50%;
    color: #fff;
    text-align: center;
}

30.03.2018 15:13

Flex - лучший инструмент для этого. Несмотря на это, есть решения с блоком дисплея. Flex просто позволяет более подробно управлять им:

.slide-buttons {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: center;
  
  /* Clarity marker, removed when you understand the example */
  background-color: rgba(0,0,0,.1);
}
.slide-buttons > a {
  display: inherit;
  align-items: center;
  align-content: center;
  justify-content: space-around;
  
  height: 32px;
  width: 32px;
  margin-right: 5px;

  cursor: pointer;
  
  font-size: 16px;
  line-height: 1;
  background-color: #2874f0;
  border-radius: 50%;
  color: #fff;
}
.slide-buttons > a:last-child { 
  margin-right: 0;
}
#bt-slide-left:after {
  content: '\276E'; /* \003C */
}
#bt-slide-right:after {
  content: '\276F'; /* \003E */
}

<div class = "slide-buttons">
  <a id = "bt-slide-left"></a>
  <a id = "bt-slide-right"></a>
</div>

<br>

<!-- or -->
<div class = "slide-buttons">
  <a>&#60;</a>
  <a>&#62;</a>
</div>

30.03.2018 15:41

Другие вопросы по теме

Оптимизируйте избыточные стили CSS в HTML

Позиционирование элементов с помощью CSS

Как предотвратить появление элемента с помощью jQuery или JavaScript?

Установка аватара пользователя определенного размера без нарушения макета

Отзывчивое выравнивание нескольких изображений (горизонтальная И вертикальная оси)

Выровняйте кнопку «Снять» слева в Qualtrics с помощью css

Html bullets данные из списка mysql ul с 3 цветами различий

Чтобы применить разные стили шрифта к определенным словам в Wordcloud Highcharts?

При наведении курсора элементы появляются друг над другом

Граница Mozilla Firefox перекрывается

Элемент CSS не в строке

Ответы 6

Другие вопросы по теме

Похожие вопросы