Question

我与我的照片有经验carousell相关的问题... 出于某种原因，在后面的2张旋转木马图片中，文字不应该是中心（看看我的附图并查看文本在挖掘机图像顶部看起来如何与博物馆内拍摄的图像相比）。有人可以查看我下面的代码吗？

<?php get_header(); ?>
<body>

<div class="container">
  <!--<h2>Ajoneuvo</h2> -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div id="myCarousel123">
    <!-- Indicators -->
    <ol class="carousel-indicators">

      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nordkalk.jpg" alt="Nordkalk" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli">Nordkalk</h3>
          <p id ="karuselli">Nordkalk <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Hammerglass, lisätietoa klikkaamalla</p>
        </div>
      </div>

      <div class="item">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton.png" alt="Matias" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli">Matias Mäkikoskela</h3>
          <p id="karuselli">Hammerglass pelasti Matiaksen!</p>
        </div>
      </div>



    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
  </div>
  <!--<h2>Kiinteistö</h2> -->
  <div id="myCarousel2" class="carousel slide" data-ride="carousel">
  <div id="myCarousel123">
    <!-- Indicators -->
    <ol class="carousel-indicators">

      <li data-target="#myCarousel2" data-slide-to="1"></li>
      <li data-target="#myCarousel2" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/riihimaki_edit.png" alt="Metsästyslasi" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli" style="text-align:center;"><center>Metsästysmuseo</center></h3>
          <p id="karuselli">Hammerglass vitriinit metsästysmuseossa!</p>
        </div>
      </div>

      <div class="item">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton-3.png" alt="Vaaksy" style="width:100%;">
        <div class="carousel-caption">
          <h3>Wääksyn kartano</h3>
          <p>Wääksyn kartano; maneesin ikkunasuojaus</p>
        </div>
      </div>



    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel2" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel2" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
  </div>
  <br>
  <!--<h2>Sää- ja melusuojat</h2> -->

  <div id="myCarousel3" class="carousel slide" data-ride="carousel">
  <div id="myCarousel123">
    <!-- Indicators -->
    <ol class="carousel-indicators">

      <li data-target="#myCarousel3" data-slide-to="1"></li>
      <li data-target="#myCarousel3" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton3.png" alt="Tampere" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli">Myllypuronkatu</h3>
          <p id="karuselli">Ce-hyväksytty melusuoja Tampereella!</p>
        </div>
      </div>

      <div class="item">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton.jpg" alt="Kotka" style="width:100%;">
        <div class="carousel-caption">
          <h3>Koskenkylä</h3>
          <p>Elinkaarimelusuojausta Ahvenkosken sillalla!</p>
        </div>
      </div>



    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel3" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel3" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
  </div>
  </div> 
<?php get_footer(); ?>`<?php 
/**
*Template Name:Frontpage 
* 
*@package Wordpress
*@subpackage hammmerglass
*@since hammerglass 0.1 alpha
*/
?>
<?php get_header(); ?>
<body>

<div class="container">
  <!--<h2>Ajoneuvo</h2> -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div id="myCarousel123">
    <!-- Indicators -->
    <ol class="carousel-indicators">

      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nordkalk.jpg" alt="Nordkalk" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli">Nordkalk</h3>
          <p id ="karuselli">Nordkalk <span class="glyphicon glyphicon-heart" aria-hidden="true"></span> Hammerglass, lisätietoa klikkaamalla</p>
        </div>
      </div>

      <div class="item">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton.png" alt="Matias" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli">Matias Mäkikoskela</h3>
          <p id="karuselli">Hammerglass pelasti Matiaksen!</p>
        </div>
      </div>



    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
  </div>
  <!--<h2>Kiinteistö</h2> -->
  <div id="myCarousel2" class="carousel slide" data-ride="carousel">
  <div id="myCarousel123">
    <!-- Indicators -->
    <ol class="carousel-indicators">

      <li data-target="#myCarousel2" data-slide-to="1"></li>
      <li data-target="#myCarousel2" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/riihimaki_edit.png" alt="Metsästyslasi" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli" style="text-align:center;"><center>Metsästysmuseo</center></h3>
          <p id="karuselli">Hammerglass vitriinit metsästysmuseossa!</p>
        </div>
      </div>

      <div class="item">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton-3.png" alt="Vaaksy" style="width:100%;">
        <div class="carousel-caption">
          <h3>Wääksyn kartano</h3>
          <p>Wääksyn kartano; maneesin ikkunasuojaus</p>
        </div>
      </div>



    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel2" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel2" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
  </div>
  <br>
  <!--<h2>Sää- ja melusuojat</h2> -->

  <div id="myCarousel3" class="carousel slide" data-ride="carousel">
  <div id="myCarousel123">
    <!-- Indicators -->
    <ol class="carousel-indicators">

      <li data-target="#myCarousel3" data-slide-to="1"></li>
      <li data-target="#myCarousel3" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">

      <div class="item active">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton3.png" alt="Tampere" style="width:100%;">
        <div class="carousel-caption">
          <h3 id="karuselli">Myllypuronkatu</h3>
          <p id="karuselli">Ce-hyväksytty melusuoja Tampereella!</p>
        </div>
      </div>

      <div class="item">
        <img src="http://localhost/wordpress/wp-content/uploads/2017/06/nimeton.jpg" alt="Kotka" style="width:100%;">
        <div class="carousel-caption">
          <h3>Koskenkylä</h3>
          <p>Elinkaarimelusuojausta Ahvenkosken sillalla!</p>
        </div>
      </div>



    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel3" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel3" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
    </div>
  </div>
  </div> 
<?php get_footer(); ?>

This is the code for my css on the frontpage

下面您可以看到轮播图像内容的单独css代码：

    body { margin-top: 50px; }
#myCarousel {
    display: inline-block;
    float: left;
    width: 562px;
    height:370px;
}
#myCarousel2 {
    display: inline-block;
    float: center;
    width: 562px;
    height: 370px;
}
#myCarousel3 {
    display: block;
    float: center;
    width: 562px;
    height: 370px;
}
#footer {
    background-color: rgb(58,58,58);
    align: bottom;
}

p#footer {
    color:white;
}
p#karuselli {
    font-size: 28px;
    color: white;
} 
h3#karuselli {
    font-size: 60px;
    color: white;
}
h3#museo {
    font-size: 54px;
    color: white;
    text-align: center;
}
p#museo {
    font-size: 60px;
    color: white;
    text-align: center;
}

旋转木马2和3中的文字背后是否有原因？我错过了一个主导元素＆＃34;那应该改变吗？

Bootstrap轮播：图片上的文字不居中

0 个答案: