chrome中Bootstrap轮播的文本内容未与中心对齐答案

【问题标题】：Text content of Bootstrap carousel in chrome is not aligning to centrechrome中Bootstrap轮播的文本内容未与中心对齐
【发布时间】：2015-11-29 20:39:41
【问题描述】：

我需要轮播内容位于页面中心。在 chrome 中，无论我尝试什么，包括 text-align:centre

，对齐总是保持不变

            <!DOCTYPE html>

            <html lang="en">
            <head>
            <meta charset="UTF-8">
            <title>caro homepage</title>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
            <style type="text/css">
                .carousel-inner{
                  width:auto;
                  height:200px;
                  max-height:200px !important;
                }
                .carousel-content {
                    color:black;
                    display:flex;
                    text-align:center;
                }

            </style>
            </head>
            <body>

            <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-pause="hover" >
              <!-- 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>

              </ol>
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <div class="carousel-content">
                       <div style="text-align:center">
                            <h3>#1</h3>
                            <p>The first  Message.</p>
                       </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                       <div style="text-align:center">
                            <h3>#2</h3>
                            <p>The 2nd Message.</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>

            </body>
            </html>

Safari 的行为符合预期。没查过IE。你能帮忙吗？

【问题讨论】：

你能在小提琴中发布一个现场版本吗？尝试添加到类：文本中心。类似于：class="carousel-content text-center"

标签： css twitter-bootstrap-3 carousel

【解决方案1】：

您需要做的不是在carousel-content div 中的div 上使用text-align: center，而是使用margin: 0 auto。

我认为下面的代码是你想要的:)

<html lang="en">
<head>
<meta charset="UTF-8">
<title>caro homepage</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
    .carousel-inner{
      width:auto;
      height:200px;
      max-height:200px !important;
    }
    .carousel-content {
        color:black;
        display:flex;
        text-align:center;
    }

</style>
</head>
<body>

<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="4000" data-pause="hover" >
  <!-- 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>

  </ol>
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <div class="carousel-content">
           <div style="margin: 0 auto">
                <h3>#1</h3>
                <p>The first  Message.</p>
           </div>
        </div>
    </div>
    <div class="item">
        <div class="carousel-content">
           <div style="margin: 0 auto">
                <h3>#2</h3>
                <p>The 2nd Message.</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>

</body>
</html>

【讨论】：