画像の中に文字をいれて配置を変更する仕方がわかりません。

画像の中に文字をいれて文字を真ん中に寄せたいです。

調べて自分のわかる範囲でやってみました。パッと見真ん中に配置できているように思えますがコードをみるとおそらく間違っています。
![
ご教授よろしくおねがいします。

コードはこちらです

HTML
1  <main class="mti-main">
2    <article class="mti-article">
3      <img class="photo1" src="img/heroVisual.jpg" alt="メイン写真">
4      <p class="photo1letter">Enriching lives and the world</p>
5    </article>
6  </main>

CSS
1.mti-main {
2  position: relative;
3  z-index: 1;
4  overflow: hidden;
5}
6
7.mti-article {
8  position: relative;
9  z-index: 2;
10}
11
12.photo1 {
13  width: 100%;
14  height: 800px;
15
16}
17
18.photo1letter {
19  position: absolute;
20  top: 58%;
21  left: 50%;
22  -ms-transform: translate(-50%,-50%);
23  -webkit-transform: translate(-50%,-50%);
24  transform: translate(-50%,-50%);
25  font-size: 75px;
26  color: #ffffff;
27  white-space: nowrap;
28  font-family: 'Superclarendon', sans-serif;
29}

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

m.ts10806

2020/10/14 06:51

えっとレイアウトが正しいならそれで良いのでは？なにをもって「間違っている」「正しい」となるのでしょうか。ゴールが明確でないと他者には余計に手をつけられないかと思います

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

回答1件

ベストアンサー

それで間違いではないですが、
背景画像なら、imgタグではなくCSSのbackground-imageで設定した方が、いろいろ融通が利くのでお勧めです。

そうすれば、テキストはFlexboxで簡単に左右、上下中央寄せができます。

css
1body {
2  margin: 0;
3}
4
5.mti-article {
6  width: 100%;
7  height: 800px;
8  overflow: hidden;
9  background-image: url(img/heroVisual.jpg);
10  background-size: cover;
11  background-position: center;
12  display: flex;
13  justify-content: center;
14  align-items: center;
15}
16.photo1letter {
17  font-size: 75px;
18  color: #ffffff;
19  white-space: nowrap;
20  font-family: 'Superclarendon', sans-serif;
21}