Hachim AlaOui Hachim AlaOui - 1 year ago 81
CSS Question

Looking for help for a list's css (ul li)

I'm looking for help for my css code to make a list looking something like the below with an image in the center (the blue circle).


I never done something like this, so i don't have any idea to how i can code it that's why i came here. Thank you in advance !

Answer Source

I would recommend checking for compatibility issues, but you can achieve something similar if you abandon your <ul> (at least I could not get a list to function properly) and can use shape-outside

.wrapper .circle {
  float: left;
  border-radius: 50%;
  margin-right: 25px;

.wrapper .circle-list p {
  margin: 6px 0;
.wrapper .circle-list p:before {
  content: "\2022\A0";
<div class="wrapper">
  <img src="http://placehold.it/150x150/" class="circle" />
  <div class="circle-list">
    <p>This is a line of text</p>
    <p>This is also a line of text</p>
    <p>Oh my God the lines they won't stop!</p>
    <p>Run you fool!  They are coming!</p>
    <p>It's too late!  They know where you are!</p>

Essentially we just use the .circle-list element to replicate list-style behavior with the :before pseudo-class to insert a bullet and space. Other than that it's making use of shape-outside to create a simple circular wrapper.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download