2017-02-20 1 views
0

Die Textausrichtung für den Link am Ende der Seite funktioniert nicht. HierTextausrichtung funktioniert nicht

<!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> 

ist die CSS für die Webseite:

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; 
} 

Bitte dabei helfen. Es ist für ein Hausaufgabenprojekt. Immer wenn ich das Bild anlege, wird es nach links ausgerichtet. Was ist das Problem damit?

+0

Wir sind nicht hier, um Ihr Projekt oder Hausaufgabe Mann. –

+0

das ist nur ein Teil davon. :( – Abdulrahman

Antwort

2

Es ist, weil das a Element standardmäßig inline ist, was bedeutet, dass es nur so viel Platz wie benötigt auf der Seite belegt. Um es zentrieren zu können, machen Sie es zu einem Blockelement display: block; oder wickeln Sie es in ein Blockelement über und wenden Sie text-align auf das übergeordnete Element an.

<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

so etwas wie dies versuchen, fügen Sie Ihren Anker-Tag in einem Absatz-Tag