CODEWITHSUNDEEP
csstwitter-bootstrap-3carousel
user4826347
user4826347

Reputation: 783

Text content of Bootstrap carousel in chrome is not aligning to centre

I need the carousel content to be in the centre of the page. In chrome the alignment is always left no matter what I tried including 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 is behaving as expected. Haven't checked IE. Can you please help?

Upvotes: 0

Views: 381

Answers (1)

daniman
daniman

Reputation: 284

What you need to do instead of using text-align: center on the divs inside your carousel-content divs, is to use margin: 0 auto.

I think the following code is what you want :)

<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>

Upvotes: 1

Related Questions