Align the text in the center of the image, which is depicted as a bullet point

I am currently using images as bullet points for my Github Pages (markdown files), following the instructions outlined here. My goal now is to vertically center the text next to the image. This is demonstrated here (cf. lower third of page), however, I am only able to achieve this with inline css and have been unsuccessful in making it work.

This is what I have so far:

<ul style="list-style-image: url('/assets/images/thumb.jpg'); padding-left: 120px;">
<li>I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines</li>
</ul>

which gives me https://i.sstatic.net/3HVLJ.png

but ideally, I would like it to look like: https://i.sstatic.net/7ZM4l.png

I have already attempted setting the line height, but this leads to issues when there's a line break, as seen in this case. I have read about flexbox, but I am unsure how to implement it inline. Any assistance would be greatly appreciated!

I want to reiterate: IT MUST BE INLINE!!

htmlcssmarkdowngithub-pagesinline-styles

Answer №1

Have you considered using this HTML structure instead?

<div class='list-item'>
  <img src='/assets/images/thumb.jpg' class='bullet-image'/>
  <p class='item-text'>Lorem ipsum...</p>
</div>

You can then enhance the design by adding the following CSS:

.list-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

This setup should work well for your needs and allow for easy image resizing.

UPDATE:

Alternatively, you could use inline styles like this:

<ul>
   <li style="display: flex; justify-content: center; align-items: center">
      <img src='/assets/images/thumb.jpg' style=""/>
      <p> I’m writing a long list item 1 so you can see what happens when the text wraps across multiple lines </p>
   </li>
</ul>

To adjust the image size, simply include width and height properties in the img element's style attribute.

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

In order to show the responses underneath, we must first identify the parent comment

Currently, I have two different forms for comments - one is the "parent" comment form and the other is a response form. I am looking for ways to: Capture which response corresponds to which parent comment in the script Maintain the hierarchy of response ...

phphtmlsql

Element not found: {"method":"name","selector":"markUp"}

Snippet : System.setProperty("webdriver.chrome.driver", "C:\\Users\\pkshirs3\\SeleniumMaterial\\chromedriver.exe"); WebDriver webDriver = new ChromeDriver(); String urlToBeUsed = "internalURL"; webDri ...

javahtmlselenium-webdriver

When dynamically loaded HTML is involved, Javascript ajax calls often fail to execute properly

Currently, I am in the process of creating a JavaScript script that can facilitate clicking through <a href> links by only replacing the inner HTML instead of reloading the entire page. The interesting thing is, it seems to be functioning properly, e ...

javascriptjqueryhtmlajax

Utilize JavaScript to target the specific CSS class

Hello, I am currently using inline JS in my Wordpress navigation menu, redirecting users to a login page when clicked. However, I have been advised to use a regular menu item with a specific class and then target that class with JS instead. Despite searchi ...

javascriptcsswordpress

Substituting HTML checkboxes with highlighted images for consistent display across different web browsers

I am looking to transform a list of HTML checkboxes into clickable images for the user to select or deselect. My goal is to create a similar functionality as shown in this video using just CSS if possible. I have successfully implemented it in Chrome wit ...

jqueryhtmlcsscheckbox

The strategy of magnifying and shrinking graphs on Google Finance for better analysis and

I am seeking to understand the logic behind a zoom-able graph similar to the one on Google Finance. I am aware that there are pre-made components available, but I am interested in a simple example that breaks down the underlying logic. ...

javascripthtmlcssajax

Why isn't setInterval set to a duration of one thousand milliseconds?

While trying to use some code from w3schools, I noticed that the setInterval in the example is set to 5 instead of 5000. Shouldn't it be in milliseconds? If not, how can I speed up this animation? When I try reducing it to decimals like 0.01, the anim ...

javascripthtml

I'm having trouble with jQuery recognizing the left-margin property. Is there a workaround for this issue?

I rarely use jquery, but I wanted to add animation to a side bar. The sidebar menu is 670px with a -670 left-margin. When the user hovers over it, I'd like the left-margin to change to 0px and reveal the hidden content. Upon mouseout, it should return ...

jquerycssmargin

Troubleshooting a mapping problem with CSS elements

While building my website, I have successfully mapped the elements by ID for all alphabet letters except A. When clicking on the letter A, it does not go to the respective elements. Can anyone please help me find a solution? Visit this link for reference ...

htmlcss

Tips for customizing Bootstrap theme color schemes in a React/Redux application that has been bootstrapped

As a newcomer to REACT, I am facing an issue with changing the theme colors in my freshly bootstrapped react application. I have gone through some solutions suggested by others but none of them seem to work for me. My entry point looks like this: import ...

cssreactjssassbootstrap-4

Is there a way to add a dynamic animation of steam rising from a coffee cup to my SVG icon design?

I'm a budding graphic designer eager to master the art of SVG animated icons and coding. Recently, I created an SVG file of a beautiful cup of coffee using Illustrator and now I want to make the steam rise realistically through animation. However, des ...

htmlcssanimationsvg

Angular is unable to eliminate the focus outline from a custom checkbox created with Boostrap

Have you noticed that Angular doesn't blur out the clicked element for some strange reason? Well, I came up with a little 'fix' for it: *:focus { outline: none !important; } It's not a perfect solution because ideally every element sh ...

javascriptjqueryhtmlcssangularjs

Struggling with JavaScript conditional statements

Currently, I am in the process of creating a login and registration panel using jQuery and PHP. Essentially, if there are any errors during registration, it sets certain form errors, redirects back to the registration page, the JavaScript identifies these ...

phpjavascriptjqueryhtml

The text enclosed by a span located inside a div and identified by xpath

I am struggling to extract text from a span nested within another text in a div (highlighted in the image). https://i.sstatic.net/8uIWz.png This snippet of code is relevant ... <div id="groupBlock3"> <div class="groupBlockTitle& ...

htmlxpath

Having trouble with my Angular application, seems to be stuck at the loading screen. Not sure what's causing it, possibly

Hey there, I'm hoping to create a straightforward app that showcases posts. However, I've encountered an issue when deploying the initial page which is stuck on "Loading...". I believe it's a minor problem and would appreciate your assistan ...

htmlangulartypescript

How can I ensure that my image remains responsive and aspect ratio-friendly?

Is there a way to accomplish this magical effect? I find myself in a similar situation. I require an image that remains centered while adjusting to fit the screen, all while maintaining its aspect ratio. ...

htmlcssimageaspect-ratio

Allow the words to seamlessly transition back and forth between columns in a continuous cycle

Currently, I am attempting to showcase a large text in a format similar to a book. Each "page" has designated width and height, with content displayed over two columns: left and right. In this layout, page 1 is on the left, page 2 on the right, page 3 on t ...

javascriptjqueryhtmlcsswordpress

What could be causing my Node.js website to have trouble locating pages in the public directory?

Embarking on my journey in web development using node.js, I encountered an issue while trying to load a particular page, which led to the following error message in my browser: Cannot GET /public/pages/terms-and-conditions.html The file structure is orga ...

javascripthtmlnode.jsexpressweb

Using jQuery to add HTML elements before the content of a list

I'm facing a challenge in dynamically adding new elements to my list. Through ajax, I retrieve HTML data from my database and aim to iterate through each new <li> element to gradually prepend them to the top of the list. This is the snippet of ...

jqueryhtmlajax

Improving Consistency: Achieving a Uniform a:hover Effect for Links Listed in Lists

One issue I'm having is with creating a list of links and styling them with a:hover. The problem arises when the list has a defined width wider than the links themselves, causing the LIs to change color before the As on hover. It creates a messy appea ...

htmlcsshoverhtml-listsbullet