响应垂直排列绝对定位的div内的文本

我正在创建缩略图图片库。我将它悬停在图像上方，然后看到标题和说明。我希望标题和描述集中在悬停div内。响应垂直排列绝对定位的div内的文本

因为我已经将悬停div定位为绝对值，所以我无法使用常用的表格方法进行垂直对齐。每当我调整视口的大小时，文本就不会在中心了。

任何帮助，这将不胜感激。

这里是的jsfiddle例如：http://jsfiddle.net/Forresty/2snra4tL/1/

下面是代码：

HTML：

<a class="work_item_link" href="#"> 
    <div class="work_item"> 
     <img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >         
     <div class="item_hover"> 
      <div class="item_description"> 
       <h4>Item Heading</h4> 
       <p>ITEM DESCRIPTION</p> 
      </div> 
     </div> 
    </div> 
</a> 

<a class="work_item_link" href="#"> 
    <div class="work_item"> 
     <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

     <div class="item_hover"> 
      <div class="item_description"> 
       <h4>Item Heading</h4> 
       <p>ITEM DESCRIPTION</p> 
      </div> 
     </div> 
    </div> 
</a> 

<a class="work_item_link_no_margin" href="#"> 
    <div class="work_item"> 
     <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

     <div class="item_hover"> 
      <div class="item_description"> 
       <h4>Item Heading</h4> 
       <p>ITEM DESCRIPTION</p> 
      </div> 
     </div> 
    </div> 
</a>

CSS：

.work_item_link { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    margin-right: 2%; 
    //overflow: hidden; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.work_item_link_no_margin { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    //overflow: hidden; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.item_hover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: red; 
    opacity: 0; 
    transition: all 1s; 
}

来源

2014-09-20 Forrest

所以你想中心他们垂直或水平，或两者？ – Banana 2014-09-20 16:48:11

感谢您的评论。我已经想通了，但现在:) – Forrest 2014-09-20 17:06:04

我回答我自己的问题。

最后的代码可以在这里看到：http://jsfiddle.net/Forresty/2snra4tL/4/

我增加了一个DIV作为表含包含文本的DIV。

再次感谢。

HTML：

<a class="work_item_link" href="#"> 
          <div class="work_item"> 
           <img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >         
           <div class="item_hover"> 
            <div class="center"> 
            <div class="item_description"> 
             <h4>Item Heading</h4> 
             <p>ITEM DESCRIPTION</p> 
            </div> 
            </div> 
           </div> 
          </div> 
         </a> 
<a class="work_item_link" href="#"> 
          <div class="work_item"> 
           <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

           <div class="item_hover"> 
            <div class="center"> 
            <div class="item_description"> 
             <h4>Item Heading</h4> 
             <p>ITEM DESCRIPTION</p> 
            </div> 
            </div> 
           </div> 
          </div> 
         </a> 
<a class="work_item_link_no_margin" href="#"> 
          <div class="work_item"> 
           <img src="http://www.personal.psu.edu/ivs5030/plant.jpg"> 

           <div class="item_hover"> 
            <div class="center"> 
            <div class="item_description"> 
             <h4>Item Heading</h4> 
             <p>ITEM DESCRIPTION</p> 
            </div> 
            </div> 
           </div> 
          </div> 
         </a>

SCSS：

.work_item_link { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    margin-right: 2%; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.work_item_link_no_margin { 
    position: relative; 
    width: 32%; 
    height: auto; 
    float: left; 
    &:hover { 
     .item_hover { 
      opacity: 1; 
     } 
    } 
    img { 
     width: 100%; 
     display: block; 
    } 
} 
.item_hover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: red; 
    opacity: 0; 
    transition: all 1s; 
} 

.center{ 
    width: 100%; 
    height: 100%; 
    display: table; 
    text-align: center; 
} 

.item_description{ 
    display: table-cell; 
    vertical-align: middle; 

    p, h4{ 
     margin: 0; 
    } 
}

来源

2014-09-20 17:04:40 Forrest

这里是你如何调整你的文字：

平铺：

.item_description p, 
.item_description h4{ 
    text-align:center; 
}

垂直：

.item_description{ 
    position: relative; 
    margin-top: 50%; 
    -webkit-transform: translateY(-100%); 
    -ms-transform: translateY(-100%); 
    transform: translateY(-100%);  
}

Fixed Fiddle

来源

2014-09-20 17:03:54 Banana

感谢您的答案。我刚刚发布了一个答案，我设法弄清楚了自己。我以前在转换之前尝试过这种方法，但它不能很好地工作。 – Forrest 2014-09-20 17:05:40

值得注意的是，IE9及以上版本支持CSS转换。 – 2014-09-20 17:06:23

FFF ...

IM为时已晚。我希望能够提供我的第一个答案... 我为你做了一个不错的fiddle。我的技术：

transform: translate(-50%, -50%); 
top: 50%; 
left: 50%; 
position: relative;

来源

2014-09-20 17:34:30 user2486378

非常感谢您的回复。我将继续使用transform属性来记住这个技巧。 – Forrest 2014-09-20 18:50:08

响应垂直排列绝对定位的div内的文本

回答

相关问题