テキストをどのようにしたら縦中央にする出来るのか苦戦しております。
どなたかご教授頂けませんでしょうか？
実現したいこととしては、画像の上にテキストを載せて、かつ、画像のちょうど縦横中央に記事タイトルを表示させたいです。
画像はフルードイメージ（？）でして、ウィンドウの幅によって拡大縮小されるため固定サイズではありません。
また、記事タイトルも動的に書き出されるため、固定の文字数ではありません。
<div class="articleTitle">
<h1 class="title">動的に書き出される記事タイトル</h1>
<img src="記事のサムネイル画像.jpg">
</div>
display:tableもこのケースでは上手く行かないですし、positionを使ったやり方も上手く出来ませんでした。。。
みんなの回答 12 件
画像をarticleTitleの背景にして、articleTitleをtableにしてh1をtable-cellにしてもだめだった？
暇だったからやった
タイトルが1行以上になった場合は知らん
ttp://codepen.io/anon/pen/wDqdj
画像の上にテキストを縦中央表示しているサイトを見つけました。
こちらのリンク先ページの「HYPER ISLAND STUDENT STORY - MEET JOEL」のところは画像の上にテキストを縦中央表示出来ているのですが、ソースを見て、真似て見てもどうも上手く行きません。なんでだろう。。。
リンク先サイトでは画像を背景として使っていますし、さらに、imgタグでも一応表示出来るようにマークアップされているみたいでした。（display:noneでimgタグの方は非表示になっていましたが）
Blog | Hyper Island
https://www.hyperisland.com/community/news構成変える＋webkit系だけならそれっぽいのができました。
でもなんでこれで動いてるかはちょっとわからないけど・・・
テキストをどうにかして縦中央にするwebkit系のみ - js do it
http://jsrun.it/Ituki/huUOpositionでうまくいかないのでしょうか。
.articleTitle{
position: relative;
}
.title{
position: absolute;
top:50%;
width:100%;
margin-top:-.5em;
text-align:center;
}
img{
width:100%;
height:auto;
}
タイトルが一行のときのみですが。。。
うふふ、坊やたち。困ってるのかしら。IE9以上ならコレでできるんじゃないかしら。
Z63 | Vertical align anything with just 3 lines of CSS | zerosix...
http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/なんだろう・・。
回答してくれてる人たちがいるのに、それに対する返信で「ごめんなさい、すいません、ああしたいんです、こうしたいんです。」って。
まずは「ありがとうございます。」じゃないのかね。それと条件の後出しはダメよ。
それでもよかったらHyper Islandを参考にしつつ近いものができた。かも。
写真を<img>じゃなくbackgroundにしたらセンターにもできると思う。
でも高さも可変の場合はJS使わないと無理っぽい
codepen
http://codepen.io/anon/pen/lCfxqおつかれさま、坊やたち。いろいろがんばったみたいね。ほとんどできてるとおもうけど、例の参考サイトの部分を再現できる、必要最低限のHTMLとCSSをはっておくわね。
■HTML
<div class="articleTitle">
<h1 class="title"><span>記事タイトル<br>2行目</span></h1>
<img src="ttp://placeimg.com/200/200/any" alt="">
</div>
■CSS
.articleTitle {
width: 300px;
height: 300px;
background: #eee;
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
h1 {
line-height: 1;
z-index: 2;
position: relative;
height: 100%;
text-align: center;
vertical-align: middle;
}
h1:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
h1 span {
display: inline-block;
vertical-align: middle;
}
他サイトのソースを読み取り、すぐに再現できるHTML×CSSの応用力って、とても大切よ。現場や実務経験で重宝されるヒトツね。
display:table-cellでやってみた。IE8+で複数行対応。
cssはsassでスマンがこんな感じ。
.
<div class="articleTitleWrap">
<div class="articleTitle">
<h1 class="title">titletitletitletitletitle<br>titletitletitletitletitletitle<br>titletitletitle</h1>
<img src="ttp://placeimg.com/200/200/any" alt="">
</div>
</div>
.
.articleTitleWrap {
position: relative;
.articleTitle {
position: relative;
display: table-cell;
width: 200px;
height: 200px;
line-height: 0;
text-align: center;
vertical-align: middle;
h1 {
position: relative;
display: inline;
color: #fff;
line-height: 1.6;
z-index: 2;
}
img {
position: absolute;
top: 0px;
left: 0px;
}
}
}
.
width,heightを%にすればフルードイメージでもいけるはず。
疑似要素でどうにかやってみました。
IE8はテストしてないけど、IE8ダメなプロパティは使ってないつもり。
<div class="wrapper">
<div class="articleTitle">
<h1 class="title">動的に書き出される記事タイトル</h1>
<img src="記事のサムネイル画像.jpg">
</div>
</div>
<style>
.wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.articleTitle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
white-space: nowrap;
}
.title {
width: 100%;
display: inline-block;
vertical-align: middle;
text-align: center;
white-space: normal;
}
.articleTitle:after {
content: ’ ’;
width: 1px;
height: 100%;
vertical-align: middle;
display: inline-block;
}
.articleTitle img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
どうでしょう？
.wrapperの外側（bodyとか）の縦横比と画像の縦横比が合わないと、画像が変形しちゃうと思うけど・・・。
変形させずにクリップしたいなら、imgもdivで囲って何かすればいけるかも。
IE8も対応させたいなら、そのデザインを捨てるというのが正解かもな。
関連するトピックス