How To Center UL with DIV and Attach Image LIST in HTML and CSS

Very simply, if you know basic HTML and CSS you can do it, I made this post to document myself in the future project, this is to center your list data like a justify one but in center mode, I look at other solution but luckily I see a website which has this kind of style so I made this post to help others looking a solution how to do it, as you can see on the image above the list is image with check icon and this is centered, at first glance you think it's easy, but for advance devs I'm pretty sure they already know this trick, but I just want to share this to some newbie who wants also how to do it.

<div style="margin: .5rem 0 16px; font-size: .875rem; line-height: 1.28571429; text-align: center; display: block;">
<ul style="display: inline-block; list-style-type: none; text-align: left; margin: 0; padding: 0; list-style-image: url('https://nahklar.eu/wp-content/uploads/2019/01/checkmark3.png');">
  <li>Unsere Mitarbeiter suchen für Dich passende Tarife mit besseren Konditionen</li>
  <li>Du bekommst Vorschläge mit allen nötigen Infos von uns per E-Mail zugesendet</li>
  <li>Der Beratungs-Service ist für Dich kostenlos und unverbindlich</li>
  <li>Lade Deine Rechnung per Formular hoch oder schicke sie uns per WhatsApp.</li>
</ul>
</div>

As you can see on the code above I made an inline CSS inside the DIV, yes you need to insert the UL and LI tags inside the DIV, and then put a code in DIV as well as in UL tags, you can also insert a class name on side DIV and UL and separate the CSS to your stylesheets.

How To Separate Inline CSS to other CSS Files

In advance web design you should know how to separate CSS to other CSS file and just call it using the class name you set on the DIV or UL, now this is the code on HTML.

<div class="bryanDIV">
<ul>
  <li>Unsere Mitarbeiter suchen für Dich passende Tarife mit besseren Konditionen</li>
  <li>Du bekommst Vorschläge mit allen nötigen Infos von uns per E-Mail zugesendet</li>
  <li>Der Beratungs-Service ist für Dich kostenlos und unverbindlich</li>
  <li>Lade Deine Rechnung per Formular hoch oder schicke sie uns per WhatsApp.</li>
</ul>
</div>

As what you see I only add a class name inside the DIV, since we insert the UL inside DIV tags, now CSS looks like this below.

div.bryanDIV{margin: .5rem 0 16px; font-size: .875rem; line-height: 1.28571429; text-align: center; display: block;}
div.bryanDIV ul{
display: inline-block; list-style-type: none; text-align: left; margin: 0; padding: 0; list-style-image: url('https://nahklar.eu/wp-content/uploads/2019/01/checkmark3.png');
}

As you notice that called out DIV.bryanDIV then the code is followed inside the open and close bracket, same to UL which we also put CSS to finally center the text and replace the list-style-image into check icon.