iPhone SE人像模式下的Bootstrap Carousel图像未居中（其他图像是）答案

【问题标题】：Bootstrap Carousel Image Not Centered (Other Images Are) on iPhone SE Portrait ModeiPhone SE人像模式下的Bootstrap Carousel图像未居中（其他图像是）
【发布时间】：2018-01-21 05:50:02
【问题描述】：

这里是网站：http://sdgsdgsdgsdg.atwebpages.com/

在任何规模的桌面浏览器上都可以根据需要工作。如果在横向模式下，也可以在移动设备上使用。

但是，在我的 iPhone SE 上使用纵向模式时，第一个轮播图像在 Chrome 中偏离中心。

这是截图：

我尝试将text-align:center 的样式添加到轮播中该特定图像的 div 中，但没有成功。

编辑：正如先前的答案应该解决它的建议，我在答案中使用了添加到我的 css 中的代码： .carousel-inner > .item > img { 边距：0 自动； }

还是不行。

有什么想法吗？

【问题讨论】：

Bootstrap Carousel image doesn't align properly 的可能重复项。请参阅@atrepp 的回答。
@Alexander 没有修复它。

标签： jquery html css iphone twitter-bootstrap

【解决方案1】：

你现在正在使用这种风格

.unity-logo > img {
    width: auto;
    height: 386px;
    max-height: 386px;
    margin: 0 auto;
}

只需在媒体查询中覆盖上述样式即可。

@media only screen and (max-width:479px){
   .unity-logo > img {
      width:100%;
      height:auto;
    }
}

它应该可以工作..

【讨论】：

还应用自定义样式属性下的所有媒体查询，以便它们可以覆盖上述样式。
我在发布答案时忘记在媒体查询中添加类选择器，请参阅编辑后的媒体查询..
效果很好。图像比以前小了一点，但我这是唯一的缺点。我已经接受了你的回答。谢谢。
您可以像以前一样使用像素高度，但在这种情况下，图像会拉伸。

【解决方案2】：

这是你需要的：

@media(max-width:480px){
  .unity-logo > img{
     max-width: 100%;
     height: auto;
    }
}

希望对你有帮助:)

【讨论】：

我看懂了第一个代码sn-p。我只需要将父级添加到图像的容器类中。但是第二个sn-p？我需要将媒体更改为其他内容吗？因为我不希望我所有的图像都是 480 像素宽。真的不知道这意味着什么。
没有媒体查询用于根据屏幕宽度为元素提供不同的样式。所以@media(max-width:480px) 表示如果设备宽度低于 480px 则使用这些样式。
我尝试添加您的 2 个 sn-ps。没用。由于我对此有点陌生，我不确定父母是否需要 .在它之前，例如 .parent 所以我也尝试过。我也不知道我是否需要将媒体添加到 img 的课程中，所以我后来也这样做了。这是现在的 css：kianrafiee.github.io/unity/unity.css
父我的意思是包含img的元素，在你的情况下是.unity-logo ...我改变了我的代码，试试新的