как центрировать h1 и p в карусели - PullRequest
Новая
       18

как центрировать h1 и p в карусели

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

это заставляет меня задуматься, я пытаюсь просто поместить мои h1 и p в центр карусели, чтобы даже при изменении изображения текст (h1 и p) всегда оставался неизменным.

Я пытался возиться с позициями, но это создало настоящий беспорядок.

Я понимаю, что есть несколько способов достичь этого, но самый простой

Спасибо 

html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


    <!-- Custom CSS -->
    <link rel="stylesheet" href="resources/css/style.css">

    <title>Hello, world!</title>
  </head>
  <body>

<div class="carousel-header">
<h1>Front End Web Developer</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero unde laudantium aliquam eveniet nesciunt quae.</p>
</div>



    <!-- Carousel -->

      <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">

      <div class="carousel-item active">
        <img class="d-block w-100" src="https://images.unsplash.com/photo-1522199794616-8a62b541f762?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71b5877630deb9ab5996f91cc61b43f7&auto=format&fit=crop&w=1352&q=80" alt="First slide">

      </div>
      <div class="carousel-item">
        <img class="d-block w-100" src="https://images.unsplash.com/photo-1516876617270-291a72282e2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69a79b43d8f9e7955700865783aaf00e&auto=format&fit=crop&w=1225&q=80" alt="Second slide">
      </div>

      <div class="carousel-item">
        <img class="d-block w-100" src="https://images.unsplash.com/photo-1514557179557-9efc4d7949cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fc34800506787363e917e96d6b091817&auto=format&fit=crop&w=1350&q=80" alt="Third slide">
      </div>
    </div>
  </div>


CSS




body {
    position: relative;
    height: 100%;
}

/*<!-- Carousel -->*/

.carousel-inner {
    height: 50rem;
}

/*<!-- Carousel Text -->*/

.carousel-header h1 {
    text-align: center;
}

.carousel-header p {
    text-align: center;


}

1 Ответ

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

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

Код: 

body {
  position: relative;
  height: 100%;
}
.carousel-container{
  position: relative;
  height: 100%;
  width: 100%;
}
/*<!-- Carousel -->*/

.carousel-inner {
  height: fit-content;
}
/*<!-- Carousel Text -->*/
.carousel-header{
  position:absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 100;
}
.carousel-header h1 {
  text-align: center;
}

.carousel-header p {
  text-align: center;
}
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
        <link rel="stylesheet" href="resources/css/style.css">
        <title>Hello, world!</title>
      </head>
      <body>
      <div class="carousel-container">
        <div class="carousel-header">
          <h1>Front End Web Developer</h1>
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero unde laudantium aliquam eveniet nesciunt quae.</p>
        </div>
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="https://images.unsplash.com/photo-1522199794616-8a62b541f762?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=71b5877630deb9ab5996f91cc61b43f7&auto=format&fit=crop&w=1352&q=80" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="https://images.unsplash.com/photo-1516876617270-291a72282e2e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=69a79b43d8f9e7955700865783aaf00e&auto=format&fit=crop&w=1225&q=80" alt="Second slide">
            </div>
    
            <div class="carousel-item">
              <img class="d-block w-100" src="https://images.unsplash.com/photo-1514557179557-9efc4d7949cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fc34800506787363e917e96d6b091817&auto=format&fit=crop&w=1350&q=80" alt="Third slide">
            </div>
          </div>
        </div>
      </body>
    </html>

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

Привет.

...