間距和居中元素

我剛剛開始智慧html5和CSS。我似乎無法得到我的第一個標題下的頂部標誌和中間圖像居中和標題下。基本上我想知道如何按順序排列元素。間距和居中元素

這裏是我的截圖和代碼如下：

body { 
 
    text-align: center; 
 
    background-color: white; 
 
    color: black; 
 
} 
 

 
#logo { 
 
    align: left; 
 
} 
 

 
#tagline { 
 
    text-align: left; 
 
    color: black; 
 
    font-family: arial; 
 
} 
 

 
#car { 
 
    align: center; 
 
} 
 

 
table { 
 
    text-align: center; 
 
} 
 

 
#p01 { 
 
    color: black; 
 
    font-size: 24; 
 
    line-height: 10% 
 
} 
 

 
#p02 { 
 
    color: blue; 
 
    font-size: 24; 
 
    line-height: 25px; 
 
} 
 

 
#h102 { 
 
    color: green; 
 
    font-family: arial; 
 
}

<div id="logo"> 
 

 
    <img src="auto.png" alt="autologo" width="200" align="left" /> 
 

 
</div> 
 

 
<div id="tagline"> 
 

 
    <h3><em>Explore the world's supercars</em> 
 
    <h3> 
 

 
</div> 
 

 
<div id="car"> 
 

 
    <img src="aventador-coupe-facebook-og.jpg" alt="lambo" width="700" border="5px" /> 
 

 
</div> 
 

 
<p id="p01">Here is a picture of the Lamborghini Aventador</p> 
 

 
<p id="p02">The Lamborghini flagship model</p> 
 

 
<table cellspacing="0" cellpadding="4" border="4" align="center"> 
 

 
    <tr> 
 
    <td>aventador</td> 
 
    <td>huracan</td> 
 
    <td>centenario</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>asterion</td> 
 
    <td>esoque</td> 
 
    <td>murcielago</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>gallardo</td> 
 
    <td>diablo</td> 
 
    <td>countach</td> 
 
    </tr> 
 

 
</table> 
 

 
<h1 id="h102">FIND YOUR LUXURY CAR TODAY</h1>

來源

2017-08-07 Cameron Hickey

你用了很多無效的CSS屬性和HTML屬性。我評論了需要解決的問題。刪除一些無效的標記類型的固定本身。希望這可以幫助。

運行段的下方，使整個頁面看到的結果

<html> 
 

 
<head> 
 

 
    <title>My Car Website</title> 
 

 
    <!-- Start of internal style sheet --> 
 

 
    <style type="text/css"> 
 
    body { 
 
     text-align: center; 
 
     background-color: white; 
 
     color: black; 
 
    } 
 
    
 
    #logo { 
 
     margin: auto; 
 
     /* align: left; not a valid property */ 
 
    } 
 
    
 
    #tagline { 
 
     text-align: center; /* centered text */ 
 
     color: black; 
 
     font-family: arial; 
 
    } 
 
    
 
    #car { 
 
     /* align: center; not a valid property */ 
 
    } 
 
    
 
    table { 
 
     text-align: center; 
 
    } 
 
    
 
    #p01 { 
 
     color: black; 
 
     font-size: 24; 
 
     line-height: 10% 
 
    } 
 
    
 
    #p02 { 
 
     color: blue; 
 
     font-size: 24; 
 
     line-height: 25px; 
 
    } 
 
    
 
    #h102 { 
 
     color: green; 
 
     font-family: arial; 
 
    } 
 
    </style> 
 

 
    <!-- End of internal style sheet --> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="logo"> 
 

 
    <img src="http://i.imgur.com/jUinHhf.png" alt="autologo" /> <!-- removed invalid attributes --> 
 

 
    </div> 
 

 
    <div id="tagline"> 
 

 
    <h3><em>Explore the world's supercars</em></h3> 
 

 
    </div> 
 

 
    <div id="car"> 
 

 
    <img src="http://i.imgur.com/lfAFZaA.png" alt="lambo" width="700" border="5px" /> 
 

 
    </div> 
 

 
    <p id="p01">Here is a picture of the Lamborghini Aventador</p> 
 

 
    <p id="p02">The Lamborghini flagship model</p> 
 

 
    <table cellspacing="0" cellpadding="4" border="4" align="center"> 
 

 
    <tr> 
 
     <td>aventador</td> 
 
     <td>huracan</td> 
 
     <td>centenario</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>asterion</td> 
 
     <td>esoque</td> 
 
     <td>murcielago</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>gallardo</td> 
 
     <td>diablo</td> 
 
     <td>countach</td> 
 
    </tr> 
 

 
    </table> 
 

 
    <h1 id="h102">FIND YOUR LUXURY CAR TODAY</h1> 
 

 
</body> 
 

 
</html>

來源

2017-08-07 18:10:21 basement

間距和居中元素

回答

相關問題