Jquery 引导转盘映像不'；t水平对齐中心

这是我的代码：

<style>
  .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 510px;
    max-width: none;
  }
</style>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <div style="background-color: red;" class="slider col-lg-10">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img class="first-slide img-responsive center-block" src="assets/img/underconstruction.jpg" alt="First slide">
        <div class="container">
          <div class="carousel-caption">
            <h1>Example headline.</h1>
            <p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
          </div><!-- carousel-caption -->
        </div><!-- container -->
      </div><!-- item active -->
      <div class="item">
        <img class="second-slide" src="assets/img/underconstruction.jpg" alt="Second slide">
        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
          </div><!-- carousel-caption -->
        </div><!-- container -->
      </div><!-- item -->
      <div class="item">
        <img class="third-slide" src="assets/img/underconstruction.jpg" alt="Third slide">
        <div class="container">
          <div class="carousel-caption">
            <h1>One more for good measure.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
          </div><!-- carousel-caption -->
        </div><!-- container -->
      </div><!-- item -->
    </div><!-- carousel-inner -->
  </div><!-- slider col-lg-10 -->

  <div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-vertical col-lg-2 visible-lg">TAB 1</div>
  <div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-vertical col-lg-2 visible-lg">TAB 2</div>
  <div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-vertical col-lg-2 visible-lg">TAB 3</div>

  <div data-target="#myCarousel" data-slide-to="0" style="background-color: blue;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 1</div>
  <div data-target="#myCarousel" data-slide-to="1" style="background-color: yellow;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 2</div>
  <div data-target="#myCarousel" data-slide-to="2" style="background-color: cyan;" class="tabs-horizontal col-xs-4 hidden-lg">TAB 3</div>
</div><!-- carousel slide -->

我设法在大屏幕上看到了这一点：

在窄屏幕上：

如果仔细观察，窄屏幕中的图像未正确对齐中心，则会将其放置在左侧。我想去市中心

而且我不能让图像填满所有的空间，还有一些红色部分，这意味着它没有填满

请帮帮我，我花了几个小时的研究，但还是一无所获

我看到了一些保证金解决方案，但没有帮助

---

我试着设置宽度，它居中，但不能填充旋转木马的顶部和底部。而且它在窄屏幕中也会变小。

您可以将图像设置为

div

的css

背景图像，而不是使用
img
标记。然后设置
背景尺寸：封面：

div {
  background-image: url(path/to/img/relative/to/css);
  background-size: cover;
  background-position: 50%;
}

这种方法的缺点是需要指定div的宽度和高度，但使用的任何图像都会填充它，所以这应该是个问题

下面是一个例子：
引导转盘图像居中，在引导3和4-alpha中工作。
只需添加样式
text align:center到您希望居中的旋转木马项目分区。其他的将向左对齐

这将使图像居中，并且不会更改其大小。如果您需要它用图像填充整个旋转木马面板，只需将图像宽度更改为100%，它就会填充并居中（请参见下面代码中的第三幅图像）

这是直接来自Bootstrap4Alpha的旋转木马示例。额外的样式是使图像居中所需的全部（在本例中，将“center”类添加到旋转木马项目div），可以使用各种方法实现


.center{text align:center；}



通过图像标记使用图像有点复杂，因为在特殊情况下，需要元素居中、保持纵横比和溢出。相反，我建议您在
img
元素以外的其他元素上使用图像作为
background image
，然后使用
background-position:50%
和
background-size:auto 100%
来实现所需效果。我还建议您尝试将您的问题重新格式化为其他人可以使用的内容，此示例仅对您有所帮助。
背景大小：cover
无法提供此结果，
contain
可能会，但会对较小的状态进行额外的媒体查询。cover填充容器，保留纵横比。您应该只添加
背景位置：50%
以使图像居中。我会在答案中加上这个。也许我不明白这个问题，也许是我当时不明白。很高兴OP让它工作了。
<style> .center { text-align:center; } </style>


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active center">
      <img src="http://placeimg.com/200/200/tech" alt="First slide">
    </div>
    <div class="carousel-item">
      <img src="http://placeimg.com/200/200/nature" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img style="width:100%;" src="http://placeimg.com/200/200/people" alt="Third slide">
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="icon-prev" 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="icon-next" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>