如果可以通过图像HTML/CSS对齐箭头仅

我有一些图片和标题旋转木马：如果可以通过图像HTML/CSS对齐箭头仅

<div class="photo-carousel"> 

     <div class="carousel-arrow"> 
      <a href="javascript:void(0);"> 
       <i class="arrow-left"></i> 
      </a> 
     </div> 

     <ul class="photo-list"> 
      <li class="photo"> 
       <div class="image-wrap">...</div> 

       <div class="title">....</div> 

       <div class="description">...</div> 
      </li> 

      <li class="photo"> 
       <div class="image-wrap">...</div> 

       <div class="title">....</div> 

       <div class="description">...</div> 
      </li> 
     </ul> 

     <div class="carousel-arrow"> 
      <a href="javascript:void(0);"> 
       <i class="arrow-right"></i> 
      </a> 
     </div> 
    </div>

的jsfiddle链接：http://jsfiddle.net/u21ezn9y/

如何对齐由.carousel箭头元素.image-wrap，而不是li高度？我希望箭头在图像中间对齐。什么是最好的方式来做到这一点？

来源

2015-02-09 blackhard

请张贴您的CSS – GibboK 2015-02-09 14:33:47

您可能需要考虑包括jsfiddle项目，代码片段或相关的CSS文件内容。我这样说是因为我可以在HTML标记中看到一些CSS类名称，这可能会影响提议的解决方案的工作方式。 – 2015-02-09 14:36:31

这不是CSS。那是什么，少一点，萨斯，...？ – j08691 2015-02-09 14:47:43

你也可以设置一些绝对或相对定位...

.carousel-arrow{ 
position: absolute; 
top: 50%; 
margin-top: -2.5em;//depending on arrow 
}

然后设置right:10px到右，left:10px到左，这是怎样的箭头旋转木马通常被设置...

来源

2015-02-09 15:00:18 maioman

这是一个断点的解决方案，但如果图像包装的高度会改变吗？我的意思是包裹图像的高度和宽度取决于屏幕的大小。如何动态调整图像的中间位置？我可以做到没有js吗？ – blackhard 2015-02-09 15:10:29

'顶部：50％'是一个敏感的价值 – maioman 2015-02-09 15:56:03

使用只有HTML/CSS，我会删除您的.image-wrap的边距，并对您的描述进行绝对定位。通过这种方式，这些标签不会被计算在高度上，以箭头为中心。

.image-wrap { 
    width: 170px; 
    height: 220px; 
    background: red; 
} 

.title { 
    position: absolute; 
    bottom: -50px; 
} 

.description { 
    position: absolute; 
    bottom: -70px; 
}

的jsfiddle：http://jsfiddle.net/u21ezn9y/2/

给它一个尝试，让我知道这是否有助于！

来源

2015-02-09 15:27:07

如果可以通过图像HTML/CSS对齐箭头仅

回答

相关问题