Центрируйте div внутри Bootstrap Carousel, используя Flexbox - PullRequest
Новая
       10

Центрируйте div внутри Bootstrap Carousel, используя Flexbox

0 голосов
/ 02 мая 2018

Я пытаюсь добавить кружок в середине моей карусели 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>

1 Ответ

0 голосов
/ 02 мая 2018

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

#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>
...