Question

我希望对bootstrap的旋转木马提供一些帮助，特别是如何将标签中的文本向上/垂直居中移动。转盘具有左右控制，并且这些相对于转盘垂直居中，其高度为560px。但是，标签中包含的文本位于控件下方，我也希望此文本垂直居中（或向上移动）...我也在努力调整h1标签的字体大小，所以我是猜测我没有从我的css文件中正确访问元素。

carousel.css

.carousel {
    height: 560px;
    margin-bottom: 60px;
}

.carousel-caption {
    z-index: 10;
}

.carousel .item {
    height: 560px;
    background-color: #777;
}

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 560px;
}

的index.html

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img class="first-slide" src=...."/>
            <div class="container">
                <div class="carousel-caption">
                    <h1>Text Here!!!!!!!!!!</h1>
                      <p><a class="btn btn-lg btn-primary" href="@Url.Action("Index", "Users")" role="button">Sign up today</a></p>
                </div>
            </div>
        </div>
        <div class="item">
            <img class="second-slide" src=...."/>
                <div class="carousel-caption">
                   <h1></h1>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
            </div>
        </div>
        <div class="item">

            <div class="container">
                <img class="third-slide" src=....."/>
                <div class="carousel-caption">
                    <h1>Text Here!!!!!</h1>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

感谢。

Answer 1

如果你想要560px的高度，那么当你运行代码片段时，只需滚动该部分。

要将元素放在页面的中心，请使用以下css，

.text-center{
  display:flex;
  align-items:center;
  text-align: center;
  width:100%;
  height:100%;
}

尝试下面的html和css，文本和按钮位于页面的中心。

＆＃13;

  <style>
  .carousel {
    height: 560px;
    margin-bottom: 60px;
}
.text-center{
  display:flex;
  align-items:center;
  text-align: center;
  width:100%;
  height:100%;
}
.inner-center{
	width:100%;
}

.carousel-caption {
    z-index: 10;
    
}

.carousel .item {
    height: 560px;
    background-color: #777;
}

.carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 560px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </head>
 <body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
           
                  <div class="text-center">
                   <div class="inner-center">
                      <h1>Sign up today</h1>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
      		</div>
        </div>
        <div class="item">
                <div class="text-center">
                   <div class="inner-center">
                      <h1>Learn more</h1>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
      		</div>
        </div>
        <div class="item">
          <div class="text-center">
                   <div class="inner-center">
                      <h1>Browse</h1>
                      <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse</a></p>
                </div>
      		</div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel"  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="#myCarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" ></span>
        <span class="sr-only">Next</span>
    </a>
</div>

</body>
</html>

＆＃13;

Bootstrap轮播示例用css更改文本边距和大小

1 个答案: