Position the text on the left side while also centering it within my div

I am attempting to center align some links within my div, while also ensuring that the text of the links is aligned to the left.

However, I have been unsuccessful in achieving this. I can either align them to the left or center, but not both simultaneously.

Do you have any suggestions on how to accomplish this?

Here is a demonstration of what I am currently getting: http://jsfiddle.net/HRKN4/

This is the HTML code I am using:

<div class="container">
    <h3>Title:</h3>
    <div class="content">
       <ul class="links">
          <li> <a href="#">&raquo;&raquo; This link is bigger</a></li>
          <li> <a href="#">&raquo;&raquo; Smaller 1</a></li>
          <li> <a href="#">&raquo;&raquo; link 1</a></li> 
       </ul>
     </div>
</div>

And this is the applicable CSS styling:

.container
{
    text-align:center;
    width:100%;
    margin:0 auto 0 auto;
    background:pink;
}

.content
{
    width:100%;
    height:300px;
}

.links 
{
    list-style-type:none;
    margin:0 auto; 
}

.links li a 
{
    text-decoration:none;
    background:red;
    color:#000;
    margin-top:20px;
    margin:0 auto; 
}
htmlcssalignment

Answer №1

If you're looking to create a table layout, you can utilize the following CSS:

.links {
   display:table;
}

Additionally,

.links li a {
   display:table-row;
}

Here's an example

Alternatively, you can use

.links li{
    text-align : left;
}

Instead of using display:table-row;

Check out this example

Answer №2

To ensure the "content" div is centered on the page, you can set a specific width and use margin: 0 auto;. This allows you to maintain left-aligned text within the div using text-align:left;.

For a demonstration, check out this revised JSFiddle: Click here

Answer №3

If you want to experiment, consider the following:

.links 
{
    display: inline-block;
    list-style-type:none;
    margin:0 auto; 
    text-align: left;
}

For a live demonstration, visit: http://jsfiddle.net/audetwebdesign/m9daD/

Answer №4

Here is an alternative solution:

.nav-links 
{
    list-style-type:none;
    width:50%;
    float:right;
}

Check out the demo here

Answer №5

To achieve the desired layout, simply set ..containerlinks to have a style of display:inline-block; and text-align:center;.

The ul element will automatically adjust its width based on the longest link and will be centered within the container due to the text-align:center; property. All links inside can then be aligned to the left.

Check out the DEMO here

.container {
    text-align:center;
    background:pink;
}
.content {
}
.links {
    list-style-type:none;
    display:inline-block;/* centers the box with text-align from .container */
    text-align:left;/* aligns content to the left */
}
.links li a {
    text-decoration:none;
    background:red;
    color:#000;
}

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 accessing the HTML code of a TextBox in JavaScript while utilizing HTMLEditorExtender

Currently, I am utilizing the HTMLEditorExtender ajax tool on my website. The data is being saved in HTML format into the database and then retrieved within my project without any issues. However, there is a setback that I have encountered... When attemp ...

javascriptjqueryhtmlasp.netasp.net-ajax

Using jQuery-Ajax to fetch MySQL data in Perl

Currently, I am in the process of developing a webpage that consists of three essential components: a select box, a button, and a table. At a high level, the user makes a selection from the element and then clicks the button. Subsequently, a PERL script is ...

mysqlperlhtmljquery

Flex mode allows for responsive row details in ngx-datatable

Having an issue with my ngx datatable row details. Everything works well initially, but when I adjust the browser width, the details don't scale properly with rows and columns. They seem to have a fixed width that was set when the page was first loade ...

cssangularngx-datatable

What is the best way to delete a jQuery.bind event handler that has been created for an event

I have a div and I need to assign two scroll functions to it, but I also want to remove one of them after a certain condition is met. <div id="div1" class="mydivs"> something </div> <div id="div2">Some crap here</div> <script&g ...

javascriptjqueryhtmlajax

What is the reason behind not being able to utilize addEventListener on a variable that has been selected through DOM's getElementsByClassName method?

btn = document.getElementsByClassName('btn'); value = document.getElementById('value'); let counter = 0; btn[2].addEventListener('click', function() { if (btn[2].classList.contains('decrease')) counter -= 1; if ...

javascripthtmlcssarraysdom

What should be displayed if there are no search results?

My form for filtering a database is working perfectly in the first section: $result=$dbh->prepare("SELECT * FROM performers WHERE accent='$txt_accent' AND hair='$txt_hair' AND gender='$txt_gender' AND location='$txt_l ...

phphtmlmysql

"HTML Parsing with Simple DOM: Dealing with Class Names Containing Spaces

I am currently utilizing PHP Simple HTML DOM to extract elements from the source code of a website (which is not my own). However, when attempting to locate a ul class named "board List", it is not being found. It seems like there may be an issue with spac ...

phphtmlsimple-html-dom

CSS Opacity Issue

Why is the article transparent? Despite my efforts to search online for similar instances, I am surprised at not finding anything and feeling quite puzzled about what steps to take next. body { background-color: #000000; opacity: 0.8; background-i ...

htmlcss

Translucent overlay enhancing image contrast

Currently, I have a container with a background image that turns semi-transparent on hover. Below is the simplified version of my HTML: <div class="container"> <div class="overlay"></div> <img src="hi.jpg"> </div> This ...

htmlcss

Failing to hide a div on hover: Hoverintent's shortcomings

When I hover over the div with the unique identifier id="navbar", it doesn't seem to trigger any actions. I have included the following script in my document head: <script type="text/javascript" src="https://ajax.googleapi ...

javascripthtmljqueryhoverintent

Encountering the message "Error: Unable to access undefined properties (reading 'username')" while making my POST request

My POST request isn't functioning correctly and it's failing to update. The specific error message I'm encountering is: TypeError: Cannot read properties of undefined (reading 'username') app.post('/create-user', functio ...

javascripthtmlexpresshandlebars.js

Is there a possible CSS-only alternative to the calc() function that can be used as a fallback

I'm aware of a CSS backup plan for calc() in IE6-7. Also, I've come across an alternative using jQuery. But what about a CSS-only substitute for calc() specifically for IE8? Is there one available? ...

css

Tabulator filter - Enhancing CSS elements for a unique touch

Is there a way to customize the CSS elements of filters used in tabulator.js? Specifically, I am looking to: Apply different background colors to text filters Add a down arrow on the right side of each drop-down filter box I have included a screenshot ...

csstabulator

Looking to retrieve HTML elements based on their inner text with queryselectors?

I am looking to extract all the HTML divs that contain specific HTML elements with innerText = ' * ' and save them in an array using Typescript. If I come across a span element with the innerText= ' * ', I want to add the parent div to ...

javascripthtmltypescriptqueryselector

Avoid loading the background image by utilizing CSS to set the background image

Whenever I attempt to assign a background image using CSS, it triggers a console error. This is my CSS code: body { background-image: url("background.png"); background-repeat: no-repeat; } The error message displayed is: GET http://localhost/myWeb/ ...

jqueryhtmlcss

When it comes to designing responsive websites, the use of `@

Being new to CSS, I am open to criticism and feedback. @media (max-width: 735px) {... } @media (min-width: 735px) {... } @media (width: 320px) {... } @media (width: 360px) {... } @media (width: 375px) {... } @media (width: 414px) {... } I have tried us ...

cssmedia-queries

having difficulty setting up tabs using uib-tabset

I have been experimenting with dynamically creating tabs using uib-tabset. Each tab is supposed to contain a different form, but the issue I am facing is that the textbox from the first form is being overwritten by the newly generated tab. When I enter d ...

htmlangularjs

Exploring Web Scraping Through Dual System Security

I come seeking guidance on how to navigate a website with two different security systems in place. The first system requires a username and password, which I have successfully managed to handle. However, the second security system only requires a password ...

pythonhtmlauthenticationweb-scraping

Showing the values of selected checkboxes in a select dropdown - here's how!

Link to the jsfiddle : https://jsfiddle.net/a1gsgh11/9/ The JavaScript code seems to not be working on the js fiddle platform. My main concern is that I would like the selected checkbox values to display immediately without needing to submit any buttons. ...

javascriptphpjqueryhtmlcheckbox

What is the best way to fetch HTML content using JavaScript?

I needed to incorporate JavaScript for fetching HTML code. I structured the HTML code in the following manner; <html> <div id="tesingCode"> <h1>Title</h1> <p>testOfCodetestOfCodetestOfCodetestOfCode</p> </div ...

javascripthtmlpolymerpolymer-1.0