2016-05-31 3 views
0

私はdivの中にテキストを垂直方向に集中させることができましたが、まだそれほど大きくはありません。垂直センタリング "ほぼ"完璧を求めて

ほとんどのトリックは、この(私は解決策を見つけたURLを含めました)だったキーCSS:

body.page-template-template-portfolio .caption, 
body.single-portfolio .caption { 
    top: 0; 
    left:0; 
    right: 0; 
    bottom: 0; 
    visibility: hidden; 
    opacity: 0; 
    border-bottom: none; 

    /* THE MAGIC (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) */ 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 

} 

body.page-template-template-portfolio .fancybox-thumb a { 
     text-align: center; 
} 

ここで(私はCSSの十分を追加しました状況のjsfiddleですそれが私のサイト上で行うようにそれが動作するように取得するための私のワードプレスのテーマ)から:

https://jsfiddle.net/cosmocanuck/ukro9qfv/41/

あなたがうまく行けば見ることができるように、ホバーで、キャプションが原因p.captionTitleへの最上部に浮き、少し高いです同封の.caption div、これは完全に垂直にセンタリングされています。 - タイトルは一行だけである場合、テキストは左揃えに

不思議
p.captionTitle { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
} 

、今、縦に仕事をしているようだけれども:しかし、私は垂直だけでなく、内側のdivを中心に、これを追加しようとすると、 2本の線がある場合に限り、それは水平に中央にとどまる。それについては何ですか?

誰かが助言できる...感謝!

アダム

答えて

0

.folio-grid .captionセレクタからfloatheight CSSプロパティを削除します。 floatは、absoluteの配置で余分です。marginpから削除し、top: 0; bottom: 0のプロパティも余分です。

html { 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 
p { 
 
    font-family: Arial, sans-serif; 
 
    font-weight: bold; 
 
} 
 

 
.folio-grid { 
 
    list-style: none; 
 
    float: left; 
 
    z-index: 8; 
 
    overflow: visible !important; 
 
} 
 

 
.folio-grid li { 
 
    margin: 60px 17px 0; 
 
    float: left; 
 
} 
 

 
.fancybox-thumb img { 
 
    margin: 0 !important; 
 
    float: none !important; 
 
    vertical-align: top; 
 
} 
 

 
.folio-grid img { 
 
    border-radius: 50%; 
 
    width: 100%; 
 
    max-width: none; 
 
} 
 

 
.folio-grid span { 
 
    font-size: 12px; 
 
    line-height: 16px; 
 
    display: inline-block; 
 
    font-weight: 500; 
 
    color: #656565; 
 
} 
 

 
.fancybox-thumb { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
.fancybox-thumb span { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 

 
/* VERTICALLY CENTER THE ROLLOVER PORTFOLIO TITLES */ 
 

 
.folio-grid .caption { 
 
    padding: 19px 0 19px; 
 
    text-align: center; 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    padding: 0 1em !important; 
 
} 
 

 
p.captionTitle {} 
 

 

 
/* ROLLOVER CAPTIONS INSIDE THE THUMBNAILS (also changed order of HTML elements in template-portfolio.php) */ 
 

 
.caption { 
 
    left: 0; 
 
    right: 0; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    border-bottom: none; 
 
    padding: 19px 0 19px; 
 
    /* THE MAGIC (http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) */ 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.fancybox-thumb a { 
 
    text-align: center; 
 
} 
 

 
.fancybox-thumb:hover .caption, 
 
.fancybox-thumb:hover .caption { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    background-color: transparent !important; 
 
} 
 

 

 
/* Keep everything transparent */ 
 

 
.fancybox-thumb .caption, 
 
.fancybox-thumb .caption p, 
 
.fancybox-thumb .caption span { 
 
    background-color: transparent !important; 
 
} 
 

 
.fancybox-thumb:hover .caption p { 
 
    background-color: transparent !important; 
 
} 
 

 
.fancybox-thumb:hover .caption span { 
 
    background-color: transparent !important; 
 
} 
 

 

 
/* Text colour and stylin' */ 
 

 
.caption p { 
 
    color: white; 
 
    margin: 0; 
 
} 
 

 
.fancybox-thumb .caption span { 
 
    font-family: 'Helvetica Neue LT W01_71488914'; 
 
    font-size: 1.2em; 
 
    color: white; 
 
}
<ul id="portfolio" class="folio-grid cthree clearfix"> 
 

 
    <li class="item"> 
 

 
    <a href="http://unicyclecreative.com/unicycle/portfolio/rebrand-a-better-coatings-company-broda-wood-stain/?id=1689" class="clearfix"> 
 

 
     <div class="fancybox-thumb"> 
 
     <img src="http://unicyclecreative.com/unicycle/wp-content/uploads/2016/02/portfolio-circle-BRODA-275x275.jpg" width="275" height="275" alt="Rebrand a better coatings company: BRODA Wood Stain" /> 
 
     <span></span> 
 

 
     <div class="caption"> 
 
      <p class="captionTitle">Rebrand a better coatings company: BRODA Wood Stain</p> 
 
     </div> 
 

 
     </div> 
 

 
    </a> 
 
    </li> 
 

 
    <li class="item"> 
 

 
    <a href="http://unicyclecreative.com/unicycle/portfolio/london-drugs-whats-the-green-deal-4/?id=1689" class="clearfix"> 
 

 
     <div class="fancybox-thumb"> 
 
     <img src="http://unicyclecreative.com/unicycle/wp-content/uploads/2016/02/portfolio-circle-GreenDeal-275x275.jpg" width="275" height="275" alt="London Drugs What&#8217;s the Green Deal?" /> 
 
     <span></span> 
 

 

 
     <div class="caption"> 
 
      <p class="captionTitle">London Drugs What&#8217;s the Green Deal?</p> 
 
     </div> 
 

 

 
     </div> 
 

 

 
    </a> 
 

 
    </li> 
 
</ul>

関連する問題