当WordPress中的图像变成PHP循环时，如何水平对齐？

我想解包的问题，以便它是明确的，你会看到下面的代码。我把我的HTML引导页面变成了WordPress动态站点。图像不再位于img标签下。因此，如果你看下面，我不确定我是否需要调整col-xl-2类或在CSS中创建has_post_缩略图选择器。我需要我的图像从垂直对齐到水平对齐。如果你看柱的中心，保持它的中心，但我需要它水平对齐。我试着按照WordPress Codex中关于设计“post”缩略图样式的指导，但没有起到任何作用

这是我的index.php文件：

<?php

// Advanced Custom Fields
// this is a bunch of variables with our fields to echo out in PHP
$images_feature_title = get_field('images_feature_title');
$images_feature_body = get_field('images_feature_body');
$indianapolis_feature_title = get_field('indianapolis_feature_title');
$indianapolis_feature_body = get_field('indianapolis_feature_body');
$social_media_image = get_field('social_media_image');
$social_media_title = get_field('social_media_title');
$social_media_feature_body = get_field('social_media_feature_body');

?>

<?php get_header(); ?>




    <!-- Carousel
    ================================================== -->

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

        <?php 

        $notun = new WP_Query(array(
            'post_type' => 'bcarousel'
        ));

        $indicator = -1;

        while($notun->have_posts()) : $notun->the_post(); $indicator++ ?>
          <li data-target="#myCarousel" data-slide-to="<?php echo $indicator; ?>"<?php if($indicator == 0) : ?> class="active" <?php endif; ?>></li>
        <?php endwhile; ?>

        </ol>

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

        <?php 

        $carousel = new WP_Query(array(
           'post_type' => 'bcarousel',   
        ));

        $korim = 0;

        while($carousel ->have_posts()) : $carousel ->the_post(); $korim ++ ?>

        <?php if($korim == 1) : ?>
          <div class="item active">

        <?php else : ?>
          <div class="item">
        <?php endif; ?>


            <div class="carousel-image">
             <?php the_post_thumbnail(); ?>
             <div class="carousel-caption">
               <h1><?php the_title(); ?></h1>
               <h2><?php the_content(); ?></h2>
             </div>
            </div>


          </div>

        <?php endwhile; ?>
        </div>

        <!-- Left and right Carousel Arrows -->
        <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><!-- /.carousel -->



    <!-- Images Feature Section
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <!-- <div class="container marketing"> -->

      <!-- Three columns of text below the carousel -->
      <section class="row content-region-1 pt40 pb40">
        <div class="container">

          <?php $loop = new WP_Query(array('post_type' => 'images_feature','orderby' => 'post_id', 'order' => 'ASC')); ?>
          <?php while($loop->have_posts()) : $loop->the_post(); ?>
          <div class="col-xl-2 col-centered">
            <?php
              if (has_post_thumbnail()) {
                the_post_thumbnail();
              }
            ?>
            <p><a href="#" class="link"><?php the_title(); ?> &raquo;</a></p>

          <?php endwhile; ?>
          </div><!-- /.col-lg-2 -->

        </div>
      </section><!-- /.row -->


       <!-- Indianapolis Feature Section
    ================================================== -->
      <section class="row" id="indy-glass">
        <div class="container">
          <div class="col-md-12">
              <h2><?php echo $indianapolis_feature_title; ?></h2>
              <hr />
              <p class="lead"><?php echo $indianapolis_feature_body; ?></p>
          </div>
          <div class="col-md-12 text-center">
            <p><a class="btn btn-danger" href="#" role="button">Learn More &raquo;</a></p>
          </div>
        </div>
      </section>


      <section class="row content-region-2 pt40 pb40" id="customer-testimonial">
        <div class="container">
          <div class="col-md-12">
              <h1>What Our Customers Are Saying...</h1>
              <p class="lead">We love Mirror Concepts! The team is professional and courteous and the new weightroom
              mirrors look awesome!</p>
              <cite>~ Jeff and Cindy Kivett</cite>
              <p><a href="#" id="gallery">Read More &raquo;</a></p>
            </div>
          </div>
      </section>


      <!-- Social Media Section
    ================================================== -->
      <section class="row content-region-3 pt40 pb40" id="indy-glass">
        <div class="container">
          <div class="col-md-12 facebook-page">

            <!-- If user uploaded an image -->
            <?php if(!empty($social_media_image)) : ?>

              <img src="<?php echo $social_media_image['url']; ?>" alt="<?php echo $social_media_image['alt']; ?>">

            <?php endif; ?>

          </div>
              <h2><?php echo $social_media_title; ?></h2>
              <hr />
              <?php $loop = new WP_Query(array('post_type' => 'social_media_feature','orderby' => 'post_id', 'order' => 'ASC')); ?>
              <?php while($loop->have_posts()) : $loop->the_post(); ?>
              <div class="col-lg-2 col-centered">
                <?php
                  if (has_post_thumbnail()) {
                    the_post_thumbnail();
                  }
                ?>
              <?php endwhile; ?>
              </div><!-- /.col-lg-2 -->

              <p><a href="#" class="link">See more on Facebook &raquo;</a></p>
          </div>
      </section>

<?php get_footer(); ?>

/*
  Theme Name: Mirror and Glass Theme
  Author: Daniel Cortes
  Author URI: http://dancortes.com
  Description: Theme developed for MediaFuel
  Version: 1.0
*/


/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  background: url('/wp-content/themes/mirror_glass/assets/img/tile.jpg') top left repeat;
}

h1,h2,h3,h4,h5,h6 {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: bold;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-align: center;
}

a {
  color: #000000;
}

a#gallery {
  color: white;
  font-size: 24px;
}

/*Non-Bootstrap CSS*/

.content-region-1, .content-region-2, .content-region-3 {
  /*text-align: center;*/
  /*float: right;*/
}

#customer-testimonial {
  background: #3e4249;
  color: white;
}

#showroom {
  text-align: center;
}

.btn-danger {
  padding: 10px 20px;
  margin-bottom: 10px;
  font-size: 20px;
  border-radius: 10px;
}

.btn-default {
  border: none;
  background-color: transparent;
  font-size: 24px;
}

/*.col-centered {
  display: inline-block;
  float: none;
}*/

.container {
  max-width: 1020px;
}

.navbar-default {
    background-color: white;
    margin-bottom: 0;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.header h3 {
  margin-top: 40px;
  margin-bottom: 10px;
  line-height: 40px;
}

.carousel-image {
    margin: 0 auto;
}

p {
  margin-top: 4px;
}

a.link {
  font-size: 20px;
}

a:hover {
  text-decoration: none;
}

a.btn-default:hover {
  text-decoration: none;
}

.fa {
  font-size: 98px;
  margin-top: 10px;
  margin-bottom: -10px;
  opacity: 0.1;
}

.facebook-page {
  position: relative;
  line-height: -0.8;
}

/*.col-xl-2 {
  margin: auto;
  text-align: center;
  width: 100%;
  display: block;
}*/

#indy-glass {
  background: white;
}

.footer {
  padding-top: 19px;
  text-align: center;
  color: #777;
  border-top: 1px solid #e5e5e5;
}

.content-region-4 {
    background: #000000;
    color: #ffffff;
}

.side-widget {
  margin-bottom: 40px;
}

.side-widget h3 {
  border-left: 5px;
  padding-left: 10px;
  margin-bottom: 15px;
}

/*==== MEDIA QUERIES ====*/

@media screen and (max-width: 991px) {
  .img-rounded {
     margin: 12px;
  }
}