2017-07-01 37 views
0

我有這段代碼,但是我不能將標題上方的圖像居中。 我試過allign/center等,但圖片只卡在網頁的左側。而且我想放在標題上方的中心,所以如果你們能幫助我,我需要這個ç-ç的幫助。我必須做什麼才能在此代碼的標題之上放置一個imagem?

<!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` 
+0

通過說「圖片」你的意思是'

+0

對不起,我忘記把圖像代碼看在CSS部分 – Aizu

+0

你只是想居中?如果是這樣,將'margin:auto'加到'.circular' –

回答

0

我想你指的是在下面的代碼<img/>標籤:

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

如果是這樣,你必須給寬度圖像,然後把它的利潤率爲auto:

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

Worked! Thx幫助。 – Aizu

相關問題