Twitter bootstrap 在“移动视图”中将引导图像和2个按钮居中对齐

我已经使用Bootstrap几个月了，这很简单，但是这个非常简单的任务让我很困惑。在桌面上，我有一行，左边有一个大的图像徽标，右边有两个按钮。在移动设备上，图像徽标应位于中间，图像徽标下的两个按钮也应居中，使其看起来像一个漂亮整洁的三角形

我尝试过许多不同的场景，比如在其中嵌套行，还创建了许多列，但所有这些场景都会使移动视图失真

下面是显示手机上最好的代码，尽管它仍然倾斜，图像徽标稍微向左对齐，按钮没有很好地居中

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg" role="button">Forward</a>
        </div>
     </div>  
  </div>

---

如何确保移动视图在所有内容都以中心为中心的情况下看起来正确？谢谢

bootstrap为图像和按钮提供了中心对齐类

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg" class="img-responsive center-block"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg center-block" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg center-block" role="button">Forward</a>
        </div>
     </div>  
  </div>

编辑

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg" class="img-responsive center-mobile"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg center-mobile" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg center-mobile" role="button">Forward</a>
        </div>
     </div>  
  </div>

---

bootstrap为图像和按钮提供中心对齐类

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg" class="img-responsive center-block"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg center-block" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg center-block" role="button">Forward</a>
        </div>
     </div>  
  </div>

编辑

<div class="container">
     <div class="row">
        <div class="col-xs-9 col-md-8">
            <a href="#"><img src="imagelogo.jpg" class="img-responsive center-mobile"></a>
        </div>
        <div class="col-xs-9 col-md-4" align=center>
            <a href="#" class="btn btn-success btn-lg center-mobile" role="button">Back</a>
                &nbsp;&nbsp;
            <a href="#" class="btn btn-default btn-lg center-mobile" role="button">Forward</a>
        </div>
     </div>  
  </div>

---

谢谢你的帮助。这将使图像与大屏幕和小屏幕中央的按钮对齐。相反，在大屏幕上，我需要左边的图像对齐，右边的按钮对齐，但在小屏幕上，它们应该像三角形一样居中。你给我的代码在小屏幕上效果很好，看起来也不错，但在大屏幕上，它仍然将徽标居中，而不是将其向左对齐。HTML5不再支持align=center-属性。感谢您的额外编辑和代码。我也试过了，但在小屏幕上，它并没有将徽标移到中央。按钮正在移动中心，因为我在div中有align=center，但是CSS没有帮助。我确保清除了服务器和浏览器上的缓存，并检查了不同的浏览器。关于可能发生的事情还有其他想法吗？这看起来很简单，但我也被难倒了：将“col-xs-9”改为“co-xs-12”。由于这一假设，在mobile中，列的宽度为75%。通常情况下，对于我提供的媒体查询，如果不添加float:none到.center mobile styles，并尝试将结束标记添加到图像中，因此应该是“/>如果不起作用，请尝试查看此页面谢谢您的帮助。这将使图像与大屏幕和小屏幕中央的按钮对齐。相反，在大屏幕上，我需要左边的图像对齐，右边的按钮对齐，但在小屏幕上，它们应该像三角形一样居中。你给我的代码在小屏幕上效果很好，看起来也不错，但在大屏幕上，它仍然将徽标居中，而不是将其向左对齐。HTML5不再支持align=center-属性。感谢您的额外编辑和代码。我也试过了，但在小屏幕上，它并没有将徽标移到中央。按钮正在移动中心，因为我在div中有align=center，但是CSS没有帮助。我确保清除了服务器和浏览器上的缓存，并检查了不同的浏览器。关于可能发生的事情还有其他想法吗？这看起来很简单，但我也被难倒了：将“col-xs-9”改为“co-xs-12”。由于这一假设，在mobile中，列的宽度为75%。通常情况下，对于我提供的媒体查询，如果不将float:none添加到.center mobile styles，并尝试将结束标记添加到图像中，因此应该是“/>如果不起作用，请尝试查看此页面