使用图像Bootstrap中心并调整旋转木马 Headers

2 回答

• 1

  在css中添加以下类

  .carousel-caption {
      background-color: #00F;
      text-align: center;
      top: 50%;
      transform: translateY(-50%);
  }
  

  回复于 2024-05-02T11:20:49+08:00
• 0

  谢谢你的意见 . 我找到了适合我需要的解决方案 .

  这里是：

  body {
    background-color: white;
  }
  
  .carousel-inner > .item {
    height: 100vh;
  }
  
  .carousel-inner > .item > img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-height: 800px;
    width: auto;
  }
  
  .carousel-control.left,
  .carousel-control.right {
    background-image: none;
  }
  .carousel-caption {
  position: absolute;
    top: 30%;
  
   
  }
  h1 {
    font-size: 5.9vw;
  }
  h2 {
    font-size: 3.0vh;
  }
  p {
    font-size: 2vmin;
  }
  

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  
  <div class="container">
  
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  
      <!-- indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
  
      <!-- inner -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="http://i.imgur.com/A83qNiV.jpg" alt="">
           <div class="container">
              <div class="carousel-caption">
                <h1>One more for good measure.</h1>
                <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
              </div>
            </div>
        </div>
        <div class="item">
          <img src="http://i.imgur.com/OlbCjdA.png" alt="">
        </div>
        <div class="item">
          <img src="http://i.imgur.com/wwOoOIc.png" alt="">
           <div class="container">
              <div class="carousel-caption">
                <h1>One more for good measure.</h1>
                <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                <a class="btn btn-large btn-primary" href="#">Browse gallery</a>
              </div>
            </div>
        </div>
      </div>
  
      <!-- controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
      
    </div>
  
  </div>
  

  我使用了可调整大小的字体来完成它 .

  h1 {
     font-size: 5.9vw;
  
  }
  h2 {
     font-size: 3.0vh;
  }
  p {
     font-size: 2vmin;
  }
  

  回复于 2024-05-02T11:20:49+08:00