文本在Bootstrap Carousel中对齐

Question

我有一个问题，将图像置于旋转木马中（幸运的是我在这里找到答案），现在我遇到了另一个问题，对齐文本。更精确的是，我希望图像（它是一个固定大小的图像400x400）在左侧，文本在右侧。有什么建议 ？

HTML：

<!-- Start Carousel -->
    <div id="product-detail carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="container">
            <div class="carousel-img"></div>
            <div class="carousel-text">
              <p class="cat-title pull-right">Mercury</p>
              <p class="cat-icon pull-right">^^^^^</p>
              <p class="caption-text pull-right">Movie buff Tony Chou (Tony Zhou) published in his Vimeo video review with an analysis of the demonstration set of SMS and other text messages in modern cinema.</p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="..." alt="...">
          <div class="carousel-caption">
            ...
          </div>
        </div>
        ...
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left control-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right control-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

<!-- End Carousel -->

CSS：

/*************************
    CAROUSEL
*************************/

.carousel .carousel-inner {
    height: 550px;
    background: #faf9f9;
}

.carousel-control.right,
.carousel-control.left {
    background-image: none;
}

.control-icon {
    color: #393939;
    text-shadow: none;
}

.item {
    position: relative;
    height: 100%;
}
.carousel-img {
    width: 400px;
    height: 400px;
    background-image: url('../img/jewelery.jpg');
    background-size: cover;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.carousel-text .cat-icon {
    text-shadow: none;
    margin-left: 0;
}

.carousel-text .caption-text {
    color: #b7b7b7;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    text-align: left;
}