Alignment troubles persist with text formatting

The alignment of the link at the bottom of the page seems to be causing an issue.

<!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>Exploring various tourist attractions around the world is the focus of this webpage. From tropical paradises to icy terrains, it covers a wide range of destinations.</p>
    <h2>France</h2>
    <p>France, located in Western Europe, offers a mix of historic cities, picturesque villages, and beautiful coastlines. Paris, its capital, is famous for fashion, art museums like the Louvre, and landmarks such as the Eiffel Tower. The country is also known for its wines and gourmet cuisine. Ancient cave paintings in Lascaux, Roman theaters in Lyon, and the grand Palace of Versailles reflect France's rich cultural heritage.<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">Discover more travel options on this website!</a>
</div>
</body>
</html>

Below is the CSS code used for styling 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;
}

I am facing an issue with the image alignment. It always aligns on the left side when added. Can anyone provide assistance with this problem?

htmlcss

Answer №1

One reason for this is that the a element defaults to being an inline element, so it only takes up as much space as necessary on the page. To center it, you can either change it to a block element using display: block;, or place it within a parent block element 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>

Answer №2

Experiment with this approach, placing your anchor element within a paragraph container

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Hovering over text can change the width of the background color

I'm currently facing a roadblock while working on my website. I have successfully adjusted the height of the list items on my navigation bar, but now I am struggling to expand the width so that when hovering over it, the background color covers a slig ...

htmlcss

Entering text into the input field with the string "Foo"<[email protected]> is not functioning correctly

The text in my input is initially filled with this string "foo foo"<<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2920200f29202061263b">[email protected]</a>>. However, after an insert, the string now l ...

htmlcssinput

Incorporating JSON data into an HTML table

Looking to populate an HTML table with JSON data, but struggling with parsing and appending the data correctly. Can anyone provide guidance or assistance? <!DOCTYPE html> <html> <head> <title>JSON Demo</title> < ...

javascripthtmljson

Add a sound file to the server and configure the images based on the server's response

I am a newcomer to JavaScript and AJAX, and I am facing an issue while trying to upload an audio file to the server and display the image from the server response. When attempting to pass the audio file from the input tag to an AJAX call, I encounter an il ...

javascriptjavahtmlajaxjakarta-ee

What is the best way to display the panel during a postback?

I have a group with two radio buttons labeled purchase and expenses. When the purchase radio button is clicked, the panelpurchase will be displayed, and similarly, the panelexpense will show for the expenses radio button. Check out the image of the output ...

javascriptc#jqueryhtmlasp.net

What is the best way to incorporate a PHP file into an HTML file?

Below is the code snippet from my index.php: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Voting Page</title> <script type="text/javascript" src="js/jquer ...

javascriptphpjqueryhtml

What could be causing my handle button to slide off the timeline towards the right?

I'm facing an issue with my volume bar component where the slider button is rendering outside of the timeline instead of on top of the progress bar. I need assistance in adjusting its position. // Here is the code for my volume bar component: import ...

javascripthtmlcssruby-on-rails

Utilizing d3 Charts in Angular 4 Framework

I need assistance with integrating a bar chart in an Angular 4 project, which includes HTML and TypeScript files as components. Can someone please provide guidance on this? The bar chart should show the increase in the number of employees each month, star ...

c#htmlangulartypescriptnvd3.js

What is the process for animating classes instead of ids in CSS?

My webpage currently features a setup similar to this. function wiggle(){ var parent = document.getElementById("wiggle"); var string = parent.innerHTML; parent.innerHTML = ""; string.split(""); var i = 0, length = string.length; for (i; i ...

javascripthtmljquerycsscss-animations

Switch background color multiple times on click using JavaScript loop

Hello amazing people! I have a container with 52 small boxes and one large box containing a letter. The smaller boxes are arranged around the larger one using CSS grid, and when hovered over, they turn light grey. My Objective When any of the 52 small b ...

javascriptjqueryhtmlcss

continuously repeating css text animation

How do I create an animation loop that slides infinitely, repeating non-stop in full screen without breaking at 'hello5'? I want to display 3 rows of the same item from my items array. Not sure which CSS is causing the issue. The result I am loo ...

htmlcssvue.js

Is there a way to insert a record upon the user clicking on the Add Record button?

// Here is my Component code // I want to figure out how to add a new row to the table with fresh values. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-uom', templateUrl: './uom.component.html ...

angularhtmlcss

Angular 2: Issue with disabled functionality not functioning correctly

In my TypeScript code, I have created a boolean variable called readOnlyMode. When this variable is set to true, all elements should be disabled. To achieve this, I am using [disabled]="readOnlyMode" in the HTML for elements that need to be disabled. Howev ...

htmlangulartypescript

Display Email content within a bootstrap modal using CSS styling

Is there a way to prevent CSS from overwriting tags on my original page when loading an email body into a modal via ajax call? The email body has its own CSS styles that are affecting the layout of my current page. I've considered renaming all the tag ...

jquerycsstwitter-bootstrap

Problems with form functionality in React component using Material UI

Trying to set up a signup form for a web-app and encountering some issues. Using hooks in a function to render the signup page, which is routed from the login page. Currently, everything works fine when returning HTML directly from the function (signup), ...

javascripthtmlreactjscomponentsmaterial-ui

What is the best way to utilize jQuery in order to present additional options within a form?

Let's consider a scenario where you have an HTML form: <form> <select name="vehicles"> <option value="all">All Vehicles</option> <option value="car1">Car 1</option> <option value="car2">Car 2< ...

javascriptjquerycsshtml

Creating a unique design for a CSS menu with distinct section dividers and stylish onHover effects

Hey there! I'm currently working on a new menu design using UL and LIs elements. I would really appreciate some advice on how to add lines after each LI and properly indent them with the specific bullet image I have chosen. If you're interested ...

html-listscss

JavaScript file encountering a problem with its global variables

What is causing the alert("2") to pop up first instead of it being second? Why am I encountering difficulty creating global variables c and ctx? Is there a way for me to successfully create these two global variables in order to utilize ...

javascripthtml

Dash that serves as a barrier between two words to avoid them from breaking onto

Is there a way to keep a dash ( - ) from breaking a word when it is at the end of a line? Similar to how &nbsp; prevents a line break between two words. The issue I am facing currently is with a dynamic blog post that includes the word X-Ray. Unfortun ...

html

Unable to delete borders within the container

Is there a way to eliminate the borders within this container? Visit this link for reference. I've tried using firebug but I can't seem to locate it... Appreciate any assistance you can provide. Thank you! ...

csswordpressborder