Центрируйте div внутри карусели Bootstrap с помощью Flexbox

Я пытаюсь добавить кружок в середину моей карусели Bootsrap с помощью Flexbox. Я также хочу, чтобы фон карусели покрыл страницу высотой 100vh и шириной 100%.

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

Любая помощь будет принята с благодарностью

#fullpage {
  height:100vh;
  width:100%;
}

.vertical-center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle{
  background-color: #ff9933;
/*   margin-top:-300px; */
  z-index: 300;
  position: absolute;
  height: 480px;
  width:480px;
  border-radius: 50%;
  /*   top:15%; */
}

.process-container {
  position: relative;
}

.circle-text {
  text-align: center;
  color: white;
  font-family: 'Muli', sans-serif;
  font-weight: 200;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>Document</title>
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel = "stylesheet" type = "text/css" href = "style.css" />
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href = "https://fonts.googleapis.com/css?family=Muli:200,300,400" rel = "stylesheet">
    <script src = "app.js"></script>
</head>
<body>
  <div id = "fullpage">
    <div id = "process" class = "vertical-center">

      <div id = "processCarousel" class = "carousel slide" data-ride = "carousel">
          <!-- Indicators -->
          <ol class = "carousel-indicators">
            <li data-target = "#processCarousel" data-slide-to = "1" class = "active"></li>
            <li data-target = "#processCarousel" data-slide-to = "2"></li>
            <li data-target = "#processCarousel" data-slide-to = "3"></li>
          </ol>
        
          <!-- Wrapper for slides -->
          <div class = "carousel-inner ">
            <div class = "item active ">
              <div class = "process-container">
                  <img src = "https://images.pexels.com/photos/127673/pexels-photo-127673.jpeg?auto=compress&cs=tinysrgb&h=350" style = "object-fit: cover; height:100vh; width:100%;">
                  <div class = "vertical-center">
                      <div class = "circle vertical-center">
                          <div class = "circle-text">
                              <h1>Test</h1>
                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
                          </div>
                      </div>
                  </div>
              </div> 
            </div>
        
            <div class = "item">
                <div class = "process-container">
                    <img src = "http://worldlandforms.com/landforms/wp-content/uploads/2015/03/Beach-1024x683.jpg" style = "object-fit: cover; height:100vh; width:100%;">
                    <div class = "vertical-center">
                        <div class = "circle vertical-center">
                            <div class = "circle-text">
                                <h1>Test2</h1>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
                            </div>
                        </div>
                    </div>
                </div> 
              </div>
        
              <div class = "item">
                  <div class = "process-container">
                      <img src = "http://www.ucl.ac.uk/european-institute/events/2016-17/Ocean.png" style = "object-fit: cover; height:100vh; width:100%;">
                      <div class = "vertical-center">
                          <div class = "circle vertical-center">
                              <div class = "circle-text">
                                  <h1>Test3</h1>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
                              </div>
                          </div>
                      </div>
                  </div> 
                </div>
          </div>
        
          <!-- Left and right controls -->
          <a class = "left carousel-control" href = "#processCarousel" data-slide = "prev">
            <span class = "glyphicon glyphicon-chevron-left"></span>
            <span class = "sr-only">Previous</span>
          </a>
          <a class = "right carousel-control" href = "#processCarousel" data-slide = "next">
            <span class = "glyphicon glyphicon-chevron-right"></span>
            <span class = "sr-only">Next</span>
          </a>
        </div>
      </div>
  </div>
</body>

html css twitter-bootstrap flexbox carousel

02.05.2018 13:05

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

1 830

Ответы 1

Попробуй это. это вам поможет.

#fullpage {
  height:100vh;
  width:100%;
}

.vertical-center{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}

.circle{
  background-color: #ff9933;
  z-index: 300;
  height: 200px;
  width:200px;
  border-radius: 50%;
}

.process-container {
  position: relative;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.circle-text {
  text-align: center;
  color: white;
  font-family: 'Muli', sans-serif;
  font-weight: 200;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
    <title>Document</title>
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel = "stylesheet" type = "text/css" href = "style.css" />
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href = "https://fonts.googleapis.com/css?family=Muli:200,300,400" rel = "stylesheet">
    <script src = "app.js"></script>
</head>
<body>
  <div id = "fullpage">
    <div id = "process">

      <div id = "processCarousel" class = "carousel slide" data-ride = "carousel">
          <!-- Indicators -->
          <ol class = "carousel-indicators">
            <li data-target = "#processCarousel" data-slide-to = "1" class = "active"></li>
            <li data-target = "#processCarousel" data-slide-to = "2"></li>
            <li data-target = "#processCarousel" data-slide-to = "3"></li>
          </ol>
        
          <!-- Wrapper for slides -->
          <div class = "carousel-inner ">
            <div class = "item active ">
              <div class = "process-container" style = "background-image: url('https://images.pexels.com/photos/127673/pexels-photo-127673.jpeg?auto=compress&cs=tinysrgb&h=350')">
                
                  <div class = "vertical-center">
                      <div class = "circle">
                          <div class = "circle-text">
                              <h1>Test</h1>
                              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
                          </div>
                      </div>
                  </div>
              </div> 
            </div>
        
            <div class = "item">
                <div class = "process-container" style = "background-image: url('http://worldlandforms.com/landforms/wp-content/uploads/2015/03/Beach-1024x683.jpg')">
              
                    <div class = "vertical-center">
                        <div class = "circle">
                            <div class = "circle-text">
                                <h1>Test2</h1>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
                            </div>
                        </div>
                    </div>
                </div> 
              </div>
        
              <div class = "item">
                  <div class = "process-container" style = "background-image: url('http://www.ucl.ac.uk/european-institute/events/2016-17/Ocean.png')">
                   
                      <div class = "vertical-center">
                          <div class = "circle">
                              <div class = "circle-text">
                                  <h1>Test3</h1>
                                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, dolore?</p>
                              </div>
                          </div>
                      </div>
                  </div> 
                </div>
          </div>
        
          <!-- Left and right controls -->
          <a class = "left carousel-control" href = "#processCarousel" data-slide = "prev">
            <span class = "glyphicon glyphicon-chevron-left"></span>
            <span class = "sr-only">Previous</span>
          </a>
          <a class = "right carousel-control" href = "#processCarousel" data-slide = "next">
            <span class = "glyphicon glyphicon-chevron-right"></span>
            <span class = "sr-only">Next</span>
          </a>
        </div>
      </div>
  </div>
</body>

02.05.2018 13:10

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

Почему селектор прямого потомка CSS не применяется к компоненту Angular

Рассчитать оставшееся время Javascript

Отображение всплывающей подсказки при наведении курсора на значок font awesome

Модальное нажатие кнопки влево

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

Как убрать тень окна со стола?

Проблема с нижним колонтитулом HTML, фон div не занимает полностью

DataTable, позиция элемента не меняется при наведении курсора

Выберите первое появление дочернего элемента с классом

Выровняйте элементы карусели совы по центру

Центрируйте div внутри карусели Bootstrap с помощью Flexbox

Ответы 1

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

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