How can I center my text, while maintaining a left alignment?

Struggling to align your links left on the page but centered overall? Here is my code and I need some help. I've tried multiple methods and searched extensively, but as a beginner in coding, this is proving to be quite challenging.

Check out my site here

This is the HTML code I'm working with:

    <!DOCTYPE html>
<html>
 <head>
 <Title> Conspiracy Theories </Title>
  </head>
   <link href="mystyle.css" type="text/css" rel="stylesheet">
    <Body>
     <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />
      <a <link href="WP1.html" type="text/html" style="text-decoration:none" rel="html"> EmDrive is being tested on the X-37B</a></li>
      <a <link href="WP2.html" type="text/html" style="text-decoration:none" rel="html"> Diesel Submarines</a></li>
      <a <link href="WP3.html" type="text/html" style="text-decoration:none" rel="html">Lethal B-21 vs. B-2 Stealth Bomber</a></li>
      <a <link href="WP4.html" type="text/html" style="text-decoration:none" rel="html"> Air Force Wants a New Fighter</a></li>
      <a <link href="WP5.html" type="text/html" style="text-decoration:none" rel="html"> King Tiger Tank : Super Weapon or Super Myth?</a></li>
      <a <link href="WP6.html" type="text/html" style="text-decoration:none" rel="html"> Ground Combat Vehicle (GCV)</a></li>
      <a <link href="WP7.html" type="text/html" style="text-decoration:none" rel="html"> 3 service men killed</a></li>
      <a <link href="WP8.html" type="text/html" style="text-decoration:none" rel="html"> US intercepts 2 Russian bombers</a></li>
      <a <link href="WP9.html" type="text/html" style="text-decoration:none" rel="html"> World reacts to US strikes</a></li>
    </div>
   </div>
  </Body>
 <h1>     </h1>

Below is my CSS styling for the page:

img {
  padding-bottom: 30px;
  display: block;
  margin: auto;
  width: 10%;
}

a {
  line-height: 1.7em;
  display:block;
  margin-left: auto;
  text-align: center;
  color: black;
}

body {
   background-image: 
   url("https://presentations.inxpo.com/SharedContent/VX/images/background-
   shell.jpg");
}
htmlcss

Answer №1

Take a look at this example where I've added a container that adjusts to the width of the navigation items using the property display: inline-block;. This container is then centered with text-align: center;. I have also adjusted the text alignment of the links inside the container from center to left in order to make them align on the left side. Don't forget to validate your HTML code to catch any errors.

If you're looking for a good HTML boilerplate, check out this question: A good HTML skeleton

For cleaning up your code, you may want to visit this page: DirtyMarkup

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>
      Conspiracy Theories
    </title>
    <link href="mystyle.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif">
    <div class="text-center">
      <div class="display-inline">
        <a><link href="WP1.html" rel="html" style="text-decoration:none" type="text/html">EmDrive is being tested on the X-37B</a> 
        <a><link href="WP2.html" rel="html" style="text-decoration:none" type="text/html">Diesel Submarines</a>
        <a><link href="WP3.html" rel="html" style="text-decoration:none" type="text/html">Lethal B-21 vs. B-2 Stealth Bomber</a> 
        <a><link href="WP4.html" rel="html" style="text-decoration:none" type="text/html">Air Force Wants a New Fighter</a> 
        <a><link href="WP5.html" rel="html" style="text-decoration:none" type="text/html">King Tiger Tank : Super Weapon or Super Myth</a>       <a><link href="WP6.html" rel="html" style="text-decoration:none" type="text/html">Ground Combat Vehicle (GCV)</a> 
        <a><link href="WP7.html" rel="html" style="text-decoration:none" type="text/html">3 service men killed</a> 
        <a><link href="WP8.html" rel="html" style="text-decoration:none" type="text/html">US intercepts 2 Russian bombers</a> 
        <a><link href="WP9.html" rel="html" style="text-decoration:none" type="text/html">World reacts to US &gt;</a>
      </div>
    </div>
  </body>
</html>

CSS

.text-center {
  text-align: center;
}

.display-inline {
  display: inline-block;
}

a {
  text-align: left;
}

Answer №2

Here's a solution example where I wrapped the links in a div for better functionality. Hope this works for you!

body {
    background-image: url(https://presentations.inxpo.com/SharedContent/VX/images/background-shell.jpg);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}
img {
    padding-bottom: 30px;
    display: block;
    margin: auto;
    width: 10%;
}
body > div {
text-align: left;
    margin: 0 auto;
}
a {
    line-height: 1.7em;
    display: block;
    color: black;
}
   <!DOCTYPE html>
<html>
 <head>
 <Title> Conspiracy Theories </Title>
  </head>
   <link href="mystyle.css" type="text/css" rel="stylesheet">
    <Body>
     <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />
 <div>
      <a link href="WP1.html" type="text/html" style="text-decoration:none" rel="html"> EmDrive is being tested on the X-37B</a>
      <a link href="WP2.html" type="text/html" style="text-decoration:none" rel="html"> Diesel Submarines</a>
      <a link href="WP3.html" type="text/html" style="text-decoration:none" rel="html">Lethal B-21 vs. B-2 Stealth Bomber</a>
      <a link href="WP4.html" type="text/html" style="text-decoration:none" rel="html"> Air Force Wants a New Fighter</a>
      <a link href="WP5.html" type="text/html" style="text-decoration:none" rel="html"> King Tiger Tank : Super Weapon or Super Myth?</a>
      <a link href="WP6.html" type="text/html" style="text-decoration:none" rel="html"> Ground Combat Vehicle (GCV)</a>
      <a link href="WP7.html" type="text/html" style="text-decoration:none" rel="html"> 3 service men killed</a>
      <a link href="WP8.html" type="text/html" style="text-decoration:none" rel="html"> US intercepts 2 Russian bombers</a>
      <a link href="WP9.html" type="text/html" style="text-decoration:none" rel="html"> World reacts to US strikes</a>
    </div>
  </Body>
 </html>

Answer №3

Do you like this format? I also made some improvements to your HTML structure. Feel free to adjust the width of ul.container, which will affect the alignment of the 'list' to either left or right.

img {
  padding-bottom: 30px;
  display: block;
  margin: auto;
  width: 10%;
}

a {
  line-height: 1.7em;
  display: block;
  margin-left: auto;
  color: black;
  text-decoration: none;
}

ul.container {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  list-style-type: none;
  padding: 0;
}

main {
  background-image: url("https://presentations.inxpo.com/SharedContent/VX/images/background-
 shell.jpg");

}
<!DOCTYPE html>
<html>

<head>
  <Title> Conspiracy Theories </Title>
  <link href="mystyle.css" type="text/css" rel="stylesheet">
</head>


<main>
  <img src="http://media.moddb.com/images/groups/1/9/8589/tin_foil_hat.gif" />

  <ul class="container">
    <li><a href="WP1.html" type="text/html"> EmDrive is being tested on the X-37B</a></li>
    <li><a href="WP2.html" type="text/html"> Diesel Submarines</a></li>
    <li><a href="WP3.html" type="text/html"> Lethal B-21 vs. B-2 Stealth Bomber</a></li>
    <li><a href="WP4.html" type="text/html"> Air Force Wants a New Fighter</a></li>
    <li><a href="WP5.html" type="text/html"> King Tiger Tank : Super Weapon or Super Myth?</a></li>
    <li><a href="WP6.html" type="text/html"> Ground Combat Vehicle (GCV)</a></li>
    <li><a href="WP7.html" type="text/html"> 3 service men killed</a></li>
    <li><a href="WP8.html" type="text/html"> US intercepts 2 Russian bombers</a></li>
    <li><a href="WP9.html" type="text/html"> World reacts to US strikes</a></li>

  </ul>

</main>
<h1> </h1>

Answer №4

#site {
  /* step 2: align the content in a grid layout */
  display: grid;
  justify-content: center;
}

/* step 3: add some flair */
#site, body, html {
  background: lavender;
  color: indigo;
}
<div id="site">
  <!-- step 1: enclose the text in a block-level element -->
  <div>
    <h2>lorem ipsum</h2>
    <p>dolor sit amet</p>
    <span>consectetur adipiscing elit</span><br />
    <span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</span>
  </div>  
</div>

https://i.sstatic.net/9Gkfd.png

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

Tips for updating the minimum value to the current page when the button is pressed on the input range

When I press the next button on the current page, I want to update the value in a certain way. https://i.stack.imgur.com/XEiMa.jpg I have written the following code but it is not working as expected: el.delegate(".nextbtn", "click", f ...

javascripthtmljquery

Is there a way for me to make my navigation fill the entire height of the header?

I am trying to create a navigation menu within a header div where the list items are displayed horizontally inside a ul element. I want these list items to be 100% the height of the header. Despite trying to set the height to 100% on various elements such ...

htmlcss

Navigating to a separate .html page in Vue.js: A step-by-step guide

Hey there! I'm having an issue with Vue.js where I am trying to navigate to a different .html page that is located in my public folder when clicking a button on the page. <button @click="window.location='public/test.html'">See Results ...

htmlvue.js

Utilizing HTML and CSS to adjust the height of an IMG element to match the height of the entire document, rather than just

What steps should I take to create that impact? ...

htmlcsswindowheightdocument

Learn the method for toggling images in HTML while simultaneously storing a 0 or 1 in a flag variable

In my design, I would like to have a star icon that displays two star icons at once - one blank and the other yellow. These stars will swap their appearance when clicked or tapped on touch screen devices. Additionally, I want to be able to store values as ...

html

Generating an HTML Table of Contents (TOC) identifier using XSLT

In my HTML document generated using XSL, I aim to create table of content identifiers. Here is the initial format: <?xml version="1.0" encoding="utf-8"?> <section> <header>Heading 1</header> <section> <section> ...

htmlxmlxslttableofcontents

WebSocket cannot establish a connection with any address besides 127.0.0.1 or localhost

I built a test app that consists of both an HTML5/WebSocket client and an HTTP/WS server. The servers are written in C#, with my own simple HTTP server and a WS server based on concepts from . The HTTP server listens on 0.0.0.0:5959, and the WS server is l ...

htmlwebsocket

Is it possible to extract diverse data within two tags using BeautifulSoup for scraping?

Having encountered a new challenge, this marks my debut question on StackOverflow. I am facing a roadblock while using BeautifulSoup in combination with Python to scrape data from a web database. Previously, the scraping process was smooth sailing as the c ...

pythonhtmlbeautifulsoupscreen-scraping

Create a four-div grid that dynamically adjusts its height to match the tallest element

Seeking a way to design a grid layout that automatically adjusts the height of child divs to match the tallest one in each row. In a 2x2 grid scenario, where each div contains text, the div with the most content should determine the height for the rest. I ...

javascriptjquerycssflexbox

Show or Hide a Div with Responsive Design

Exploring responsive layouts is a new adventure for me. Most things seem to be falling into place, except for one challenge: I am struggling to show divs with the property 'display: none;' when switching it to 'display: block;' in my me ...

cssresponsive-design

Is it possible that CSS is causing the links to be unclickable?

I'm experiencing an issue where the links in my navigation bar are unclickable unless I remove some of the CSS styling I added. Here is the specific CSS snippet that needs to be removed for the links to work: .main-nav { float: right; list-style ...

htmlcss

Tips for arranging five images side-by-side in a row

I have a collection of 5 images: Image 1: Image 2: Image 3: Image 4: Image 5: The dimensions of each image are as follows: Image 1: 70x40 Image 2: 80x42 Image 3: 90x44 Image 4: 100x46 Image 5: 120x48 I would like to arrange these images ...

htmlcssimage

Stop contenteditable from inserting a div element when the Enter key is pressed using only JavaScript, and

Is there a way to prevent the contenteditable feature from adding a div when Enter key is pressed, using pure JavaScript instead of jQuery? I found an example that uses jQuery here: http://jsfiddle.net/uff3M/, but I specifically need a solution in plain J ...

javascripthtmlcss

Jquery and Ajax failing to function properly with multiple dropdown selections

I've been working on creating a functionality to have multiple dropdown menus using Bootstrap, JQuery, and AJAX. The goal is to select multiple countries from these dropdowns and store the selected values in CSV format in my database. Initially, I had ...

phphtmlajax

Audio transition on hover over image

I'm currently designing a website and I have an image depicting a house with windows. I would like to create an interactive element where the face of Goldilocks pops up in one of the windows on mouseover, accompanied by sound. I envision the face movi ...

javascriptcss

Learn how to iterate over an array and display items with a specific class when clicked using jQuery

I have an array with values that I want to display one by one on the screen when the background div is clicked. However, I also want each element to fade out when clicked and then a new element to appear. Currently, the elements are being produced but th ...

javascriptjqueryhtmlcss

PHP: Converting messy CSV data into beautifully formatted HTML tables

My client regularly sends CSV text files to my PHP application, where the elements in each row follow a consistent format but the commas that separate them vary. This inconsistency poses a challenge when trying to extract data and present it in an HTML tab ...

phphtmlcsv

What is the best method for combining several variables into a single one using a parameter?

On the webpage, there is a table containing 11 checkboxes. I am looking to create a keyword that allows testers to input just 1, 2, or 3 to select a specific checkbox without needing multiple lines of element variables. Here are the elements: xpath=(//in ...

cssseleniumxpathrobotframework

Make sure the inputs in separate table data cells are lined up in

I need help aligning two input fields in separate td elements to be on the same line. The issue I am encountering is that when an input is added to a td, it covers up any text within the td. https://i.stack.imgur.com/c7GiQ.png There are two scenarios: I ...

javascripthtmljquerycss

How can I shift an element without adjusting the padding to prevent border or margin collapse?

Is there a way to move HTML elements without the use of padding, as I need a border for color and want to avoid collapsing with other elements in the structure? Or is this the only option and should I just avoid colliding with other elements? "Margin is t ...

html