在動態尺寸的DIV內垂直對齊H2

Question

我需要在masonryJS塊內部對齊H2的幫助-垂直和水平方向，每個塊都有動態的寬度/高度（無論圖像大小如何）。 H2標簽也有懸停狀態。

我嘗試了許多不同的方法，但似乎沒有一種有效。

任何人都知道解決此問題的最干凈方法是什么？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>

<script type="text/javascript">
$(document).ready( function() {

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 160
  });

});
</script>
<style type="text/css">
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #fff;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  /* width: 49%; */
  float: left;
  background: #ccc;
  margin: 5px;
  position: relative;
  text-align: center;
}

h2.img-title {
  display: block;
  height: 100%;
  margin-bottom: 0;
  margin-top: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: rgba(255,255,255,0.7);
  opacity: 0;
}

.grid-item:hover h2.img-title {
  opacity: 1;
}

</style>



<div class="grid">

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/9b/8c/23/9b8c23be33111cc917862ad21c8e85ae.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://3.bp.blogspot.com/-vfzT5p9p4jA/TlTJfUKG27I/AAAAAAAABGQ/ujub-_1LGag/s640/fashion156tailoredissuem03.jpg" />
    <h2 class="img-title">image description with long text and testing if it goes over the edge</h2>
  </div>

  <div class="grid-item">
    <img src="https://klosetkase.files.wordpress.com/2010/01/colbyjamarbycodazzi011.jpg" />
    <h2 class="img-title">image description with normal text</h2>
  </div>

  <div class="grid-item">
    <img src="https://klosetkase.files.wordpress.com/2009/12/32.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/78/55/25/7855251d88a66f2f3ba8b5a7a44edaf8.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="https://mensrag.files.wordpress.com/2009/09/118397_9401.jpg?w=420" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://www.thecoolhour.com/wp-content/uploads/2013/10/RVLV_CLOTHING_MENS_PRESS_KIT_0002.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://i874.photobucket.com/albums/ab306/districtcut2/scarfknit.png" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://attheloft.typepad.com/.a/6a00e54ecca8b9883301630400d2ba970d-pi" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="https://s-media-cache-ak0.pinimg.com/236x/d6/ee/a5/d6eea52144d63e4fc2e923d0dd6eaccb.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://graphics8.nytimes.com/images/2015/03/08/t-magazine/08mens-well-beatnik-slide-VT66/08mens-well-beatnik-slide-VT66-jumbo.jpg" />
    <h2 class="img-title">image description</h2>
  </div>

  <div class="grid-item">
    <img src="http://2.bp.blogspot.com/-yMCE5tiXDZM/VSvWfPKc0GI/AAAAAAAEJJ8/chVDF-j-_2U/s1600/3.jpg" />
    <h2 class="img-title">image description</h2>
  </div>
</div>

http://jsfiddle.net/lvekua/fdwv1sqk/

Answer 1

將h2內的文本h2 span元素。

HTML：

<h2 class="img-title"><span>image description with long text and testing if it goes over the edge</span></h2>

CSS：

h2.img-title {
    display: block;
    margin-bottom: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    opacity: 0;
}

h2.img-title span {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS, An =<4.4.4 */
    -ms-transform: translateY(-50%); /* IE 9 */
    transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
    width: 100%;
}

演示： https : //jsfiddle.net/lmgonzalves/fdwv1sqk/4/