Position the center div within a table cell and left-align the text

I am working with a wrapper/list structure using ul and li elements. The ul element is set to display: table-row;, while the li element is set to display: table-cell;. I am facing an issue where I need to center the li element within the list, but align the text inside the li element to the left.

Here is the current code snippet:

.list-wrapper {
    display: table;
    margin: 0;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

.list {
    display: table-row;
    width: 100%;
}

.list-item {
    display: table-cell;
    text-align: center;
}

.item-link {
    text-align: left;
}
<div class="list-wrapper">
  <ul class="list">
    <li class="list-item">
      <a class="item-link">
        Text over more lines. Align me left but my parent centered.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Also centered.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Here is some text. Align me left.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Text.
      </a>
    </li>
  </ul>
</div>

Any suggestions on how to address this challenge?

htmlcsswebalignment

Answer №1

.list {
    display: table-row;
    width: 100%;
}

.list-item {
    display: table-cell;
}
<ul class="list">
  <li class="list-item">
    <a class="item-link">
      Presenting some text here. Make sure it aligns to the left.
    </a>
  </li>
  <li class="list-item">
    <a class="item-link">
      Presenting some text here. Make sure it aligns to the left.
    </a>
  </li>
  <li class="list-item">
    <a class="item-link">
      Presenting some text here. Make sure it aligns to the left.
    </a>
  </li>
  <li class="list-item">
    <a class="item-link">
      Presenting some text here. Make sure it aligns to the left.
    </a>
  </li>
</ul>

Answer №2

Are you interested in a similar solution?

.list-wrapper {
    display: table;
    margin: 0;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

.list {
    display: table-row;
    width: 100%;
}

.list-item {
    display: table-cell;
padding-right:2%;
padding-left:2%;
}

.item-link {
    text-align: left;
}
<div class="list-wrapper">
  <ul class="list">
    <li class="list-item">
      <a class="item-link">
        Content spanning multiple lines. Left-aligned within a centered container.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Also centered.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        This is some text. Align me to the left.
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Text content.
      </a>
    </li>
  </ul>
</div>

Answer №3

Unclear about the task at hand? Give this a shot.

.list-item {
    display: table-cell;
    text-align: center;
}

Answer №4

Give this a shot! :) 

.list-wrapper {
    display: table;
    margin: 0;
    position: relative;
    table-layout: fixed;
    width: 100%;
}

.list {
    display: table-row;
    width: 100%;
}

.list-item {
    display: table-cell;
    text-align: center;
}

.item-link {
    text-align: left;
}

.alignLeft{
text-align: left;
}
<div class="list-wrapper">
  <ul class="list">
    <li class="list-item">
      <a class="item-link">
      Here is someText textover more lines. <p class="alignLeft">Align me left but my parent centered.</p>
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
      Here is someAlso textcentered. 
 <p class="alignLeft">Align me left.</p>
    </a>
    </li>
    <li class="list-item">
      <a class="item-link">
        Here is some text. <p class="alignLeft">Align me left.</p>
      </a>
    </li>
    <li class="list-item">
      <a class="item-link">
      Here is some textText. <p class="alignLeft">Align </p>
 me left.
    </a>
    </li>
  </ul>
</div>

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

Ensure that a specific value is maintained for a property of an element throughout its animation

There are two distinct types of components that I am working with, which I will refer to as .a and .b. It is possible that these components have been assigned certain CSS animations. I do not have the ability to control these keyframes, whether they are a ...

javascriptcssanimationkeyframe

I'm having trouble showing the concealed list with JavaScript

I am new to javascript and facing a challenge. Whenever I update the list items in an HTML example from engineer, pilot, technician, if I select engineer, there should be an onchange event calling a function in JavaScript that shows a hidden select list co ...

javascripthtmlcss

It appears that when using Python's Selenium to open Chrome, the HTML page is dynamically inserting an iframe element

Recently, I started delving into the world of selenium and web automation, attempting to develop a program to streamline paper searches on PubMed using chromedriver. My primary goal is to automate the process of clicking the "Sign in" button located in th ...

pythonhtmlseleniumiframeselenium-chromedriver

Generate clickable links on a web page with PHP and a form

Every week I find myself tediously creating links by manually copying and pasting. It's starting to feel like a crazy process, and I'm sure there must be a faster way. A123456 B34567 d928333 s121233 I need these numbers to be transformed into h ...

phpjavascripthtml

Background cutting off right side of HTML website

While updating my supervisor's university website, I noticed a problem with the responsiveness. When resizing the browser window, a horizontal scroll bar would appear and the right side of the website would get covered by the background. On mobile dev ...

htmlcss

Why does my console refuse to log the input entered for the search?

Looking to become proficient in web development, I am attempting to record HTML search queries in the console after storing them in a variable. However, when I try running the search procedure, nothing seems to be displaying in my browser's inspect co ...

javascripthtml

Revise HTML list on Android through Simperium synchronization

As a newcomer to utilizing Simperium, I have high hopes that it will meet my needs. Since the website primarily offers tutorials and examples for IOS, I figured this would be the best place to seek assistance. My goal is to be able to modify and update an ...

androidhtmlsimperium

Tap here for supplementary HTML

My HTML code looks like this: <a class="link">text</a> <div class="items"></div> (function($) { var link = $('.link'); link.click(function(){ alert('it works!'); }); $('.items').each(fun ...

javascriptjqueryhtml

Whenever I place my cursor over a button, the adjacent button shifts to the right

This website was created as a project <!DOCTYPE html> <html> <head> <title> Anivies </title> <link rel="shortcut icon" href="non.jpg" type="image/png"> <style> There seems to be an issue with the CSS. Every ...

jqueryhtmlcss

The focus is on the last row that was selected

I've noticed that when I check and select a row in ui-grid, only the last selected row is focused with a background color. Should all rows be automatically painted by default? Thank you. ...

cssangularjsui-grid

What could be causing the bootstrap 4 col-md-3 block to shrink when using position fixed?

When working with Bootstrap 4, I encountered an issue where changing the block position from relative to fixed using a script caused the block to decrease in size. The script I used includes a .sticky class: .sticky { position: fixed !important; top: ...

javascripthtmlcssbootstrap-4

Enhanced page flow with CSS and jQuery

I'm looking to improve the overall layout of my webpage, but I can't seem to pinpoint exactly what it is that I need! Imagine you have the following HTML structure: <section> <article> <h1>Article Header</h1> & ...

javascriptjqueryhtmlcss

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...

csshtml

Is SimpleHTTPServer included in the package?

Lately, I've been experimenting with the Python SimpleHTTPServer in Mac OS X Bash instead of MAMP to assist with front-end templating. I appreciate its user-friendly nature, but I'm curious if there is a method to incorporate includes for repeate ...

pythonhtmlbashstatic

Arrange two columns of clickable text links

I am currently working on a code block and I am trying to display two columns, one on the left and one on the right. However, the second column is appearing below the first one. <style type="text/css"> a img{border:none;} #planninglaunchb ...

htmlcss

What could be causing the absence of the icon on the webpage?

I am facing an issue with my HTML code, which looks like this: <div id ="div1"> <a class="dropdown-item" href="#" id="success"> <i class="" id="successIcon">< ...

javascripthtmljquerycss

Is there a way to make the edges of this table more curved?

I utilized an HTML code generator to easily create this table, but I am struggling to give it rounded borders. .tg { border-collapse: collapse; border-spacing: 0; } .tg td { border-color: black; border-style: solid; border-width: 3px; font- ...

htmlcss

What other options are there to use instead of word-break: break-all?

Here is my current setup: <div style="word-break: break-all; width 50px;">... long text ...</div> It functions just as I desire. However, the editor is indicating: CSS validation: 'word-break' is not a valid CSS property name. ...

htmlcsswidth

Padding will not completely fill the <li> and <div> elements

Looking to create a sleek menu bar that's 40px tall and fills up 80% of the browser width. The challenge arises when trying to center the text within the menu items. Despite adjusting padding for alignment, there's still a small gap because of & ...

htmlcsshtml-listspadding

HTML table containing radio buttons styled with Font Awesome icons

I'm having some trouble getting a radio button with Font Awesome to work properly within an HTML table. Outside of the table, it functions as expected, but inside the table, it only seems to hide/show between the two states without displaying the chec ...

javascripthtmlcssangularjs