间距和居中元素

我刚刚开始智慧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

间距和居中元素

回答

相关问题