このコードの見出しの上に1つのイメージを置くために何をしなければならないのですか？

私はこのコードを持っていますが、見出しの上に画像を中央に置くことはできません。私はallign/centerなどを試しましたが、画像はウェブページの左側にしか詰まっていませんでした。そして、私は見出しの上の中央に置くことを望んでいたので、私はあなたが私を助けることができるなら、このç-çで助けが必要です。このコードの見出しの上に1つのイメージを置くために何をしなければならないのですか？

<!DOCTYPE html> 
<html> 
    <head> 
     <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
     <title>Teste!</title> 

     <style type="text/css"> 

      * { 
       margin: 0; 
       padding: 0; 
      } 
      body { 
       font-family: Lobster; 
      } 
      .background-wrap { 
       position: fixed; 
       z-index: -1000; 
       width: 100%; 
       height: 100%; 
       overflow: hidden; 
       top: 0; 
       left: 0; 
      } 

      #video-bg-elem { 
       position: absolute; 
       top: 0; 
       left: 0; 
       min-height: 100%; 
       min-width: 100%; 
      } 
      .content { 
       position: absolute; 
       width: 100%; 
       min-height: 100%; 
       z-index: 1000; 
       background-color: rgba(0,0,0,0.6); 
      } 
      .content h1 { 
       text-align: center; 
       font-size: 65px; 
       font-weight: 300; 
       color: #fff; 
       padding-top: 15%; 
       margin-bottom: 10px; 
      } 
      .content p { 
       text-align: center; 
       font-size: 20px; 
       letter-spacing: 3px; 
       color: #aaa; 
      } 
      .circular { 
       width: 300px; 
       height: 300px; 
       border-radius: 150px; 
       -webkit-border-radius: 150px; 
       -moz-border-radius: 150px; 
       background: url(http://data.whicdn.com/images/246284024/large.jpg) no-repeat; 
      } 

     </style> 


    </head> 
    <body> 
     <script> alert("Teste site")</script> 

     <div class="background-wrap"> 
      <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop"> 
       <source src="vid/kappa.mp4" type="video/mp4"> 
       Video not supported 
      </video> 
     </div> 


     <div class="content"> 
      <img src="">     
      <h1>Só queria por uma imagem em cima dessa linha.</h1> 
      <p>Teste teste teste</p> 
     </div> 

<div class="circular"> 

</div> 

    </body> 
</html>`enter code here`

出典

2017-07-01 Aizu

「Image」と言っていると、「

私はCSSの部分にイメージコードの外観を置くことを忘れています – Aizu

それを中心に？もしそうなら、 'margin：auto'を' .circular'に追加してください。 –

私はあなたが次のコードで<img/>タグを意味すると仮定します。その場合は

<div class="content"> 
    <img src="">     
    <h1>Só queria por uma imagem em cima dessa linha.</h1> 
    <p>Teste teste teste</p> 
</div>

を、あなたのイメージに幅を与え、それが自動的に余裕のputする必要があります。

.content img { 
    width: 200px; // This value is for test; 
    margin: 0 auto; 
}

出典

2017-07-01 21:28:17 Afshin

Worked！助けてくれるThx。 – Aizu

このコードの見出しの上に1つのイメージを置くために何をしなければならないのですか？

答えて

関連する問題