2017-02-20 65 views
0

页面底部链接的文本对齐无效。文本对齐无效

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="cssforwebsite.css"/> 
    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet"> 
</head> 
<body> 
<div id="top"> 
    <h1>TRAVEL GUIDE</h1> 
</div> 
<div id="body"> 
    <p>In this webpage I will write about many different tourist attractions. These will include countries from continents all around 
    the world. From countries with a warm, tropical climate, to countries with sub-zero temperatures, this page contains it all.</p> 
    <h2>France</h2> 
    <p>France, in Western Europe, encompasses medieval cities, alpine villages and Mediterranean beaches. Paris, its capital, is famed for its fashion houses, classical art museums including the Louvre and monuments like the Eiffel Tower. The country is also renowned for its wines and sophisticated cuisine. Lascaux’s ancient cave drawings, Lyon’s Roman theater and the vast Palace of Versailles attest to its rich history.<p> 
    <ul> 
     <li>The Eifel Tower</li> 
     <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/9205/SITours/skip-the-line-eiffel-tower-tour-and-summit-access-in-paris-296015.jpg" width="200px"height="160px"/> 
    </ul> 
    <a href="https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjirL3Jy_7RAhUEBcAKHVs9C6AQFggaMAA&url=http%3A%2F%2Fwww.worldtravelguide.net%2F&usg=AFQjCNGnX8FXlQKh9hEebd1Syt2Wh33q_Q&sig2=B-usIraK2zeErXSMJVlRmw&bvm=bv.146094739,bs.1,d.d2s" id="help" style="text-align:center;" target="_blank">Travel website for more help finding a holiday</a> 
</div> 
</body> 
</html> 

这里是网页中的CSS:

body{ 
    background-image: url("http://i.stack.imgur.com/jGlzr.png"); 

} 
#top{ 
    width:74%; 
    margin: 0 auto; 
    background-image:url("http://www.thetreesandthestars.co.uk/wp-content/uploads/2014/10/Up-the-beach.jpg"); 
    height:400px; 
    background-position: center center; 
} 
*{ 
    font-family: "Raleway"; 
    color: #444444; 
    font-size: 18px; 

} 
h1{ 
    color: black; 
    text-align: center; 
    position:relative; 
    line-height: 450px; 
} 
#body{ 
    background:white; 
    width: 1000px; 
    width: 74%; 
    margin: 0 auto; 
} 
p,h2{ 
    text-align: center; 
} 
#help{ 
    text-align:center; 

} 

/*This makes the link black if the mouse is not hovering over it and the user hasn't visited the link before*/ 
a:link { 
    color: black; 
} 

/*This makes the link cyan if the user has visited this website before*/ 
a:visited { 
    color: cyan; 
} 

/*this makes the link blue when the mouse is hovering over it*/ 
a:hover { 
    color: blue; 
} 

/*the link appears red when someone is holding their mouse down and hovering on top of it*/ 
a:active { 
    color: red; 
} 

请这方面的帮助。这是一个家庭作业项目。每当我添加图像时,它都会左对齐。这有什么问题?

+0

我们来这里不是为你的项目或家庭作业 人。 –

+0

这只是它的一部分。 :( – Abdulrahman

回答

2

这是因为默认情况下a元素为inline,这意味着它只占用页面上所需的空间。为了能够居中,将其设置为块元素display: block;或将其包装在块元素父项中,并将text-align应用于父项。

<a style="text-align:center;display:block;" href="#">centered</a> 
 
<p style="text-align:center;"><a href="#">centered</a></p>

body { 
 
    background-image: url("http://i.stack.imgur.com/jGlzr.png"); 
 
} 
 

 
#top { 
 
    width: 74%; 
 
    margin: 0 auto; 
 
    background-image: url("http://www.thetreesandthestars.co.uk/wp-content/uploads/2014/10/Up-the-beach.jpg"); 
 
    height: 400px; 
 
    background-position: center center; 
 
} 
 

 
* { 
 
    font-family: "Raleway"; 
 
    color: #444444; 
 
    font-size: 18px; 
 
} 
 

 
h1 { 
 
    color: black; 
 
    text-align: center; 
 
    position: relative; 
 
    line-height: 450px; 
 
} 
 

 
#body { 
 
    background: white; 
 
    width: 1000px; 
 
    width: 74%; 
 
    margin: 0 auto; 
 
} 
 

 
p, 
 
h2 { 
 
    text-align: center; 
 
} 
 

 
#help { 
 
    text-align: center; 
 
} 
 

 

 
/*This makes the link black if the mouse is not hovering over it and the user hasn't visited the link before*/ 
 

 
a:link { 
 
    color: black; 
 
} 
 

 

 
/*This makes the link cyan if the user has visited this website before*/ 
 

 
a:visited { 
 
    color: cyan; 
 
} 
 

 

 
/*this makes the link blue when the mouse is hovering over it*/ 
 

 
a:hover { 
 
    color: blue; 
 
} 
 

 

 
/*the link appears red when someone is holding their mouse down and hovering on top of it*/ 
 

 
a:active { 
 
    color: red; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" type="text/css" href="cssforwebsite.css" /> 
 
    <link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div id="top"> 
 
    <h1>TRAVEL GUIDE</h1> 
 
    </div> 
 
    <div id="body"> 
 
    <p>In this webpage I will write about many different tourist attractions. These will include countries from continents all around the world. From countries with a warm, tropical climate, to countries with sub-zero temperatures, this page contains it 
 
     all.</p> 
 
    <h2>France</h2> 
 
    <p>France, in Western Europe, encompasses medieval cities, alpine villages and Mediterranean beaches. Paris, its capital, is famed for its fashion houses, classical art museums including the Louvre and monuments like the Eiffel Tower. The country is 
 
     also renowned for its wines and sophisticated cuisine. Lascaux’s ancient cave drawings, Lyon’s Roman theater and the vast Palace of Versailles attest to its rich history. 
 
     <p> 
 
     <ul> 
 
      <li>The Eifel Tower</li> 
 
      <img src="https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/9205/SITours/skip-the-line-eiffel-tower-tour-and-summit-access-in-paris-296015.jpg" width="200px" height="160px" /> 
 
     </ul> 
 
     <a href="https://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwjirL3Jy_7RAhUEBcAKHVs9C6AQFggaMAA&url=http%3A%2F%2Fwww.worldtravelguide.net%2F&usg=AFQjCNGnX8FXlQKh9hEebd1Syt2Wh33q_Q&sig2=B-usIraK2zeErXSMJVlRmw&bvm=bv.146094739,bs.1,d.d2s" 
 
      id="help" style="text-align:center; display: block;" target="_blank">Travel website for more help finding a holiday</a> 
 
    </div> 
 
</body> 
 

 
</html>

-1

尝试这样的事情,添加锚标记一个段落标记内