テキストのイメージをHTMLの中央に配置するにはどうすればよいですか？

-2

私は画像の上にテキストを配置しようとしていましたが、中心にはなりません。私はスタックオーバーフローでここで様々な質問を見てきましたが、うまくいきません。テキストのイメージをHTMLの中央に配置するにはどうすればよいですか？

footer { 
 
    align-content: center; 
 
    justify-content: center; 
 
} 
 

 
.jumbotron { 
 
    display: flex; 
 
    align-items: center; 
 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Wave_Panorama.jpg/1024px-Wave_Panorama.jpg'); 
 
    background-size: cover; 
 
    color: #ffffff; 
 
    height: 500px; 
 
    text-shadow: 0.25px 0.25px 0.25px #000000; 
 
} 
 

 
.jumbotron h2 { 
 
    font-size: 60px; 
 
    font-weight: 700; 
 
    margin: 0; 
 
    color: #fff; 
 
    text-align: center; 
 
    position: absolute; 
 
    text-align: center; 
 
    margin: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<footer> 
 
    <section class="jumbotron"> 
 
    <div class="container"> 
 
     <div class="row text-center"> 
 
     <h2>By Me</h2> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</footer>

私のコードは単純に間違っ/混乱/散らかっているので、もし私がその理由であってもよいこと、HTMLに非常に新しいです。スタックオーバーフローのコードスニペットで修正しようとしていたので、不必要な部分がある場合は修正してください。

出典

2016-10-30 LoLucy

代わりabsolute

footer { 
 
align-content: center; 
 
justify-content: center; 
 
} 
 

 
.jumbotron { 
 
display: flex; 
 
align-items: center; 
 
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Wave_Panorama.jpg/1024px-Wave_Panorama.jpg'); 
 
background-size: cover; 
 
color: #ffffff; 
 
height: 500px; 
 
text-shadow: 0.25px 0.25px 0.25px #000000; 
 
    
 
} 
 

 
.jumbotron h2 { 
 
font-size: 60px; 
 
font-weight: 700; 
 
margin: 0; 
 
color: #fff; 
 
text-align: center; 
 
position: relative; /* MODIFICATION */ 
 
text-align: center; 
 
margin: 0; 
 
    
 
}

<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<footer> 
 
<section class="jumbotron"> 
 
<div class= "container"> 
 
<div class= "row text-center"> 
 
<h2> By Me</h2> 
 
</div> 
 
</div> 
 
</section> 
 
</footer>

出典

2016-10-30 01:57:16 AVI

または、あなたが知っている、単にコードを少しクリーンアップ... は*どこにflex: 1 1 0;を入れて、余分に<div>コンテナを取り除いの位置relativeを作ります他の非センシティブなCSSも削除し、削除する必要があります。

.jumbotron { 
 
display: flex; 
 
text-align: center; 
 
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Wave_Panorama.jpg/1024px-Wave_Panorama.jpg'); 
 
background-size: cover; 
 
color: #ffffff; 
 
height: 500px; 
 
text-shadow: 0.25px 0.25px 0.25px #000000; 
 
} 
 
.text-center { 
 
    flex: 1 1 0; 
 
    margin: auto; 
 
} 
 
.jumbotron h2 { 
 
font-size: 60px; 
 
font-weight: 700; 
 
text-align: center; 
 
}

<footer> 
 
<section class="jumbotron"> 
 
<div class= "row text-center"> 
 
<h2>By Me</h2> 
 
</div> 
 
</section> 
 
</footer>

出典

2016-10-30 01:59:26 junkfoodjunkie

* * "ただ...コードを少しクリーンアップ" - そして、それは魔法のようにそれを修正しますか？それとも、基本的な変更を加えましたか？ – GolezTrol

"クリーンアップ"した理由と以前の動作しなかった理由を説明する必要があります。余分な 'position'宣言を追加せずにフレックスボックス機能を利用しているので、あなたのソリューションは良いです。 – Sgnl

コードを見てください - それは約25行のコードですが、それはかなり明らかです。しかし、うん、私は少し説明を編集します。 – junkfoodjunkie

テキストのイメージをHTMLの中央に配置するにはどうすればよいですか？

答えて

関連する問題