2017-02-20 63 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

嘗試這樣的事情,添加錨標記一個段落標記內