私は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本の線がある場合に限り、それは水平に中央にとどまる。それについては何ですか?
誰かが助言できる...感謝!
アダム