Centered text with custom images in an HTML list

I'm experimenting with customizing lists and currently using a custom list-style-image. I'd like to know how to center the text and image so they are always aligned, even in the case of multi-line text. I've included a picture for reference.
Thanks in advance.
https://i.sstatic.net/U0D3p.png

Code:

body {
  margin:0;
}
.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: white;
}
.container > div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}

container > div .content{
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

list-div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-div ul {
  padding: 0;
  width: 75%;

}

.list-div li {
  position: relative;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  visibility: visible;
  text-transform: uppercase;
list-style-type: none;
}

.list-div li:nth-child(1){
background: url(https://fakeimg.pl/30x30/?text=A);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}
.list-div li:nth-child(2){
background: url(https://fakeimg.pl/30x30/?text=B);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}
.list-div li:nth-child(3){
background: url(https://fakeimg.pl/30x30/?text=C);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}

.list-div li:nth-child(4){
background: url(https://fakeimg.pl/30x30/?text=D);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
 
}
 <div class="container">
<div class="half-width">
    <div class="half-width-content">
      <div class="list-div">
        <ul class="items-list" id="list">
          <li>List item A    
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>List item B</li>
          <li>List item C</li>
          <li>List item D</li>
        </ul>
      </div>
    </div>
</div>
  </div>
</div>

Answer №1

You may include background-position-y: 50%; in the styling for the li

body {
  margin:0;
}
li{
 align-self: center;
}

.container {
  display:flex;
  flex-wrap:wrap;    
  flex-direction:row;    
  height:100vh;
  background-color: white;
}
.container > div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing:border-box;
  background-color: inherit;
}

container > div .content{
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}
.full-width {
  width:100%;              
}
.half-width {
  width:50%;
}

.half-width > .half-width-content{
  position: relative;
  margin-top: 0;
  height: 100%;
  width: 100%;
}

list-div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.list-div ul {
  padding: 0;
  width: 75%;

}

.list-div li {
  position: relative;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  visibility: visible;
  text-transform: uppercase;
list-style-type: none;
}


.list-div li:nth-child(1){
background: url(https://fakeimg.pl/30x30/?text=A);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
}
.list-div li:nth-child(2){
background: url(https://fakeimg.pl/30x30/?text=B);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
 
}
.list-div li:nth-child(3){
background: url(https://fakeimg.pl/30x30/?text=C);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
 
}

.list-div li:nth-child(4){
background: url(https://fakeimg.pl/30x30/?text=D);
    list-style-type: none;
    margin: 0;
    padding: 10px 10px 10px 48px;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position-y: 50%;
 
}
.list-div li{
    
}
<div class="container">
<div class="half-width">
    <div class="half-width-content">
      <div class="list-div">
        <ul class="items-list" id="list">
          <li>List item A    
          XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</li>
          <li>List item B</li>
          <li>
            <p>Multiple</p>
            <p>Paragraphs</p>
            <p>Works</p>
          </li>
          <li>List item D</li>
        </ul>
      </div>
    </div>
</div>
  </div>
</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

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

Turn off Chrome 69's autofill functionality

I've recently encountered an issue with Chrome's password autofill feature that has been troubling me for a few days now. This problem began when I was using Chrome version 69. After much trial and error, I found a solution by removing the id an ...

Separation between dropdown menu subcategories

I have searched through various discussions but haven't found a solution that addresses my specific issue, especially at a beginner level. I would really appreciate some guidance. The problem I'm facing involves my drop-down menu displaying gaps ...

The box-shadow feature seems to be disabled or ineffective when trying to send HTML content via

I am having a unique approach to sending emails using html. To combat the issue of image blocking by email providers, I have resorted to utilizing box-shadow to create the images I require. The strange thing is that it appears perfectly fine in the browser ...

Align three divs vertically within one div, all floated to achieve the desired layout

Can someone help me align three divs vertically within a container div? The challenge is that all three divs inside the container are floated - one on the right, one in the center, and one on the left to create a navbar. I've seen the navbars in Boot ...

Bring your Electronic Catalogue to life with the addition of dynamic HTML content showcasing the latest

I am creating a digital magazine but I am facing the challenge of having to deal with 200 pages in jpg format. To streamline the process, I am looking for a way to use a combination of JavaScript and PHP to avoid manually coding for each of the 200 pages. ...

Troubleshooting Problems with Fancybox Scaling on Small Landscape-Oriented Mobile Devices

Issue Description: In my responsive web design, I am utilizing Fancybox v2.1.5. The problem arises when smaller mobile devices with a more rectangular shape than square are used. In portrait orientation, when invoking Fancybox, it expands to the width of ...

The Selenium XPath isn't able to find the modal

I'm trying to target this specific input field: `(name="BtnOK" value="TAMAM" class="BoxButtonOK")` using xpath after a modal popup appears. I can't rely on .FindByClass because there are identical classes on the main page, but I specifically ne ...

Avoid letting words be separated

My question involves HTML code <div class="col-md-4">...</div> <div class="col-md-4">...</div> <div class="col-md-4">Lorem Ipsum</div> When I view this on a mobile device, the text appears as follows: Lorem Ip- sum I ...

When an HTML string contains <br/>, the line break is not displayed

I am attempting to insert a line break between Can get report and Can order in a table cell as shown below: Can get report Can order This is the code in my csHTML file: <tbody> <tr> @{ string role = string.Empty; if (p.Can ...

What is the method for attaching a keypress event to an HTML document?

Looking to add an interactive touch to my website by creating a "press any key" page. When a key is pressed, I want it to kick off animations that bring the page to life - like sliding elements in from different directions. Open to using jQuery or plain ...

The functionality of Jquery datatables seems to be faulty when navigating to the second page

While utilizing the jQuery datatables plugin, I encountered an issue where the event click function only worked on the first page and not on subsequent pages. To address this problem, I discovered a helpful resource at https://datatables.net/faqs/ Q. My ...

Learn how to implement a feature in your chat application that allows users to reply to specific messages, similar to Skype or WhatsApp, using

I am currently working on creating a chatbox for both mobile and desktop websites. However, I have encountered an obstacle in implementing a specific message reply feature similar to Skype and WhatsApp. In this feature, the user can click on the reply butt ...

How can I access a nested FormArray in Angular?

I have a situation where I am trying to access the second FormArray inside another FormArray. Here is an excerpt from my component: registrationForm = new FormGroup({ registrations: new FormArray([this.patchRegistrationValues()]) }); patchRegistrati ...

What is the process for fetching a specific image from a database folder by referencing its name?

We have a collection of images stored in the uploads folder within the root directory. Our goal is to display a single image for each user profile. Each user's profile image file name is saved in the database table called user under the field profile ...

The WebDriver encountered an error while trying to click on an element

When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...

Navigating without the need for a mouse click

Is there a way to automatically redirect without user interaction? I need the redirection to happen without clicking on anything <script> setInterval(function(){ window.location.replace("http://your.next.page/"); }, 5000); // Redirec ...

Is the AngularJS Date property model sending an incorrect value to the server?

There are some puzzling things I am trying to figure out. When using datetimepicker, the Date and time selected appear correctly on the screenshot. The value in the textbox is accurate The model's value in console is correct (but hold on a second... ...

Just sent out an email including an attachment with HTML content or a webpage link to access on Google

My email recipients primarily use Gmail as their email service provider. To address this, I saved the contents of this page as an HTML file named index.html and stored it on my drive for easy sending. However, the issue lies in the fact that the page does ...

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...