Question

这是我的头脑，我试图简单地将我的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;


}

Answer 1

您可以尝试使用此代码，但我没有包含任何媒体标记，无论如何都要使其响应，这样它将以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>

我希望我能帮到你，

问候。

如何将h1和p置于旋转木马中心

1 个答案: