画像の上に文字を置き、中央揃えにしたい

###前提・実現したいこと
レスポンシブ対応で画像の上に文字を表示させ、文字を中央揃えにしたい

###該当のソースコード

html
1<section class="conA">
2 <div class="container">
3 <ul>
4 <li>
5  <p>Menu</p>
6 	<a href=""><img src="img/menu-bnr.jpg" alt="menu" width="310" height="145"></a>
7 </li>
8 <li>
9 	<p>Salon info</p>
10 	<a href=""><img src="img/saloninfo-bnr.jpg" alt="salininfo" width="310" height="145"></a>
11 </li>
12 <li class="sm">
13 	<p class="smp">Access</p>
14 	<a href=""><img src="img/access-bnr.jpg" alt="access" width="310" height="145"></a>
15 </li>
16 </ul>
17 </div>
18</section>

CSS
1.conA .container {
2	width: auto;
3}
4.conA ul {
5	display: flex;
6	flex-wrap: wrap;
7	text-align: center;
8}
9.conA ul li {
10	flex: 1 1 50%;
11	margin: 0 auto;
12	width: 100%;
13	position: relative;
14}
15.conA p {
16	display: inline-block;
17	position:absolute;
18	top:40%;
19	left:45%;
20	text-align: center;
21}
22.conA li img {
23	width: 100%;
24	height: auto;
25}
26.conA .sm img {
27	width: 50%;
28	height: auto
29}

###試したこと
親要素をposition: relative;をかけ子要素にposition:absolute;として位置を指定したのですがうまく行きません。

よろしくお願い致します。

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

回答2件

ベストアンサー

このような感じでいかがでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        ul {
13            list-style: none;
14        }
15
16        .conA .container {
17            width: auto;
18        }
19
20        .conA ul {
21            display: flex;
22            flex-wrap: wrap;
23            text-align: center;
24        }
25
26        .conA ul li {
27            flex: 1 1 50%;
28            margin: 0 auto;
29            width: 100%;
30            position: relative;
31        }
32
33        .conA p {
34            display: inline-block;
35            position: absolute;
36            top: 50%;
37            left: 50%;
38            text-align: center;
39            transform: translateX(-50%) translateY(-50%);
40        }
41
42        .conA li img {
43            width: 100%;
44            height: auto;
45        }
46
47        .conA .sm img {
48            width: 50%;
49            height: auto
50        }
51    </style>
52</head>
53<body>
54<section class="conA">
55    <div class="container">
56        <ul>
57            <li>
58                <p>Menu</p>
59                <a href=""><img src="https://placehold.jp/310x145.png" alt="menu" width="310" height="145"></a>
60            </li>
61            <li>
62                <p>Salon info</p>
63                <a href=""><img src="https://placehold.jp/310x145.png" alt="salininfo" width="310" height="145"></a>
64            </li>
65            <li class="sm">
66                <p class="smp">Access</p>
67                <a href=""><img src="https://placehold.jp/310x145.png" alt="access" width="310" height="145"></a>
68            </li>
69        </ul>
70    </div>
71</section>
72</body>
73</html>

投稿2017/02/24 11:08

s8_chu

総合スコア14731

ryota0315

2017/02/24 14:19

こちらで解決出来ました！ありがとうございました！

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

色々な仕様・設定が入っているので最終的な形がこれでいいのか分かりませんが参考に。
出来るだけ元のコードを残していますが、ブラウザによって表示が崩れるので。。。
編集：firefoxで表示が崩れるのを確認したので修正。

    .conA {
        width:100%;
        height: auto;
    }
    .container {
       display: flex;
       width: 100%;
    }
    .conA ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }
     .conA ul li {
        display: flex;
        flex: 1 calc(100% / 2);
        position: relative;

        justify-content: center;
        align-items: center;
        margin-left: auto;
    }

    .conA li p {
        display: flex;
        position:absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        justify-content: center;
        align-items: center;
    }
    .conA li img {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .conA .sm img {
        display: flex;
        margin: auto;
        width: 50%;
        height: auto;
    }

投稿2017/02/24 02:06

編集2017/02/24 06:13