Question

我已经使用Carousel Container创建了一个文本居中（水平和垂直）居中的页眉，因为这是在图像上居中文字的最简单方法 - 参考图像。

我的客户要我在上方添加一条水平线。在下面的图片中，如下图所示，但我不确定实现这一目标的最佳方法 - 鉴于所有内容仍需要集中在一起。它必须有回应。

这是我的HTML代码（不包括Navbar，作为其Bootstrap）;

<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="item active">
        <img src="images/community-group.jpg" alt="" class="center-block img-responsive" style="opacity: 0.8;">
          <div class="carousel-caption">
            <div class="text-center full-width"><h1>Contact Us </h1></div>
          </div>
        </div>
      </div>
    </div>
  </div>

这是目前用于处理Carousel＆amp; amp;的CSS。旋转木马标题并确保它们居中：

.full-width {
    width: 100%;
}

h1 {
  color: #ffffff;
  font-size: 400%;
  text-shadow: 2px 2px #9e9e9e;
}

.carousel-caption {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    vertical-align: middle;
}

Answer 1

<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active">

        <div class="carousel-caption">
          <div class="row">
            <div class="col-sm-4">
              <div>
                <div class="col-sm-4">
                  <div class="text-center full-width">
                    <hr/>
                    <h1>Contact Us </h1>
                    <hr/>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

简单方法：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <div id="mycarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div class="item active">

        <div class="carousel-caption">
          <div class="row">
            <div class="col-sm-4"><div>
            <div class="col-sm-4">
              <div class="text-center full-width">
                <hr/>
                <h1>Contact Us </h1>
                <hr/>
              </div>
            </div>
            <div class="col-sm-4"><div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以在旋转木马上添加其他类并更改此旋转木马标题样式，如果您有原始旋转木马标题和您的旋转木马标题。只需将top更改为50％，margin-top = caption height / 2

UnityConfig.RegisterComponents();

引导程序的多行轮播标题

2 个答案: