Html 引导中的列-在列中定位图像-我正在尝试将图像居中_Html_Css_Twitter Bootstrap

Html 引导中的列-在列中定位图像-我正在尝试将图像居中

html css twitter-bootstrap

Html 引导中的列-在列中定位图像-我正在尝试将图像居中,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,这里的例子我使用Bootstrap为每个设备断点构建了一个带有相关网格的模板。它的工作原理相当不错，但我想在所有设备上将图像左右两侧的箭头放置在页面的中间位置。我用黄色来强调这篇文章的专栏。我不需要列必须相等。我尝试过填充、边距等，但似乎无法实现。有什么建议吗？提前感谢您的帮助 <style> body{padding: 0 10px; } [class*="col-"] { padding: 1em 0; background-color: rgba(255,2

这里的例子我使用Bootstrap为每个设备断点构建了一个带有相关网格的模板。它的工作原理相当不错，但我想在所有设备上将图像左右两侧的箭头放置在页面的中间位置。我用黄色来强调这篇文章的专栏。我不需要列必须相等。我尝试过填充、边距等，但似乎无法实现。有什么建议吗？提前感谢您的帮助

<style>
body{padding: 0 10px;
}

[class*="col-"] {
    padding: 1em 0;
    background-color: rgba(255,204,51,1);
    border: 1px solid rgba(204,204,102,1);
}
.container img {
    max-height:100%;
    display: block;
  margin-left: auto;
  margin-right: auto;
}

</style>

</head>

<body>
<div class="container">

    <div class="row">
        <div class=" col-lg-2 col-md-2 col-sm-1 col-xs-1">
            <span class="visible-lg"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-md"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-sm"><a href="#"><img src="images/leftArrow.png"></a></span>
            <span class="visible-xs"><a href="#"><img src="images/leftArrow.png"></a></span>
        </div><!--left arrow-->


        <div class="col-lg-8 col-md-8 col-sm-10 col-xs-10">
            <span class="visible-lg"><img src="images/carton-house.jpg" alt="Fashion" class="img-responsive"></span>
            <span class="visible-md"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
            <span class="visible-sm"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
            <span class="visible-xs"><img src="images/carton-house.jpg" class="img-responsive" alt="fashion"></span>
        </div><!--Image-->

        <div class="col-lg-2 col-md-2 col-sm-1 col-xs-1">
            <span class="visible-lg"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-md"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-sm"><a href="#"><img src="images/rightArrow.png"></a></span>
            <span class="visible-xs"><a href="#"><img src="images/rightArrow.png"></a></span>
        </div><!--right arrow-->
     </div> <!--row-->

</div><!--container-->


正文{填充：0 10px；
}
[类别*=“列-”]{
填充：1em 0；
背景色：rgba（255204,51,1）；
边框：1px实心rgba（204102,1）；
}
.集装箱img{
最大高度：100%；
显示：块；
左边距：自动；
右边距：自动；
}

尝试以下CSS：

.container img {
    max-height:100%;
    display: block;
    position: relative;
    left: 0;
    right: 0;
}

这对我有效了一段时间，所以我认为它也适用于。在您有

的地方插入'arrow'类
例如

那辆科布斯车不走运，我两边的柱子仍然倒塌。我道歉——在我的情况下，位置是“固定的”。不确定这是否是结果不同的原因？非常接近！看看新链接，左箭头隐藏在图像后面。
.row {
  position:relative;
}    

.arrow-left {
  position: absolute;
  top: 50%;
  left: 0;
  height: 50px;
}

.arrow-right {
  position: absolute;
  top: 50%;
  right: 0;
  height: 50px;
}