Abdulrahman
Reputation: 1
Text align not working
The text-align for the link at the bottom of the page won't work.
<!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>
Here is the CSS for the webpage:
body{
background-image: url("https://i.sstatic.net/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;
}
Please help with this. It is for a homework project. Whenever I add the image it aligns left. What is the problem with this?
Upvotes: 0
Views: 95
Answers (2)
ashanrupasinghe
Reputation: 756
try something like this, add your anchor tag inside a paragraph tag
Upvotes: -1
Michael Coker
Reputation: 53664
It's because the a element is inline by default, which means it only occupies as much space as needed on the page. To be able to center it, make it a block element display: block; or wrap it in a block element parent, and apply text-align to the parent.
<a style="text-align:center;display:block;" href="#">centered</a>
<p style="text-align:center;"><a href="#">centered</a></p>body {
background-image: url("https://i.sstatic.net/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>Upvotes: 2