画像の上に上下左右中央揃えした位置にテキストを設置することができないので教えてください。

もちろん自分もネット上いろいろ調べ、ネット上にある解決方法を試してみたのですがなぜかうまくいきませんでした。

実際のコードは以下のようなものです。
もし何か原因がわかる方がいましたら、教えていただけると幸いです。
よろしくお願いします。

HTML
1<div class="categories-cover-image">
2  <img ng-src="titleImage.jpg" class="img-responsive">
3  <h5><span>タイトル</span></h5>
4</div>
5

CSS
1.categories-cover-image {
2  position: relative;
3}
4  .categories-cover-image::before{
5    background-color: rgba(0,0,0,0.3);
6    position: absolute;
7    top: 0;
8    right: 0;
9    bottom: 0;
10    left: 0;
11    content: ' ';
12  }
13  .categories-cover-image h5 {
14    position: absolute;
15    margin:auto;
16    top: 0;
17    right: 0;
18    bottom: 0;
19    left: 0;
20    color: white;
21  }

kei344

2016/07/23 05:50

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

退会済みユーザー

2016/07/23 05:58

大変申しわけございません。つい先ほどこのサービスを登録させていただき、コードブロックの存在にきづいていませんでした。ご指摘ありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

書いておられるコードでは、.categories-cover-image h5 が（幅高さ100%という形ですが）上下左右中央に来ています。

動くサンプル：https://jsfiddle.net/kx2p1vkx/

CSS
1.categories-cover-image h5 {
2    position: absolute;
3    margin:auto;
4    top: 50%; /* 0 ⇒ 50% */
5    /*right: 0;*/
6    /*bottom: 0;*/
7    left: 50%; /* 0 ⇒ 50% */
8    color: white;
9    transform: translate(-50%, -50%); /* 追加 */
10}