HTML/CSS list image/bullet above/below

Question

I have the following HTML/CSS containing a list and its alignment. I managed to get the list elements at each corner of the div, now I want to try to get the image (that is basically used as the 'list-dot') to the top and bottom, so the top elements have their image centered above them and the bottom elements centered below them. Can someone help me here?

 body { margin:0; } .container { display:flex; flex-wrap:wrap; flex-direction:row; height:100vh; background-color: beige; } .container > div { min-height: 100vh; border:1px solid black; box-sizing:border-box; background-color: inherit; } .half-width { width:50%; } .half-width > .half-width-content{ position: relative; margin-top: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .list-div { position: relative; display: flex; justify-content: center; align-items: center; width: 75%; height: 75%; } .list-div ul { padding: 0; margin-top: 15%; width: 75%; } .list-div li { position: absolute; } .list-div li:nth-child(1){ top: 0; left: 0; 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){ top: 0; right: 0; 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){ bottom: 0; left: 0; 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){ bottom: 0; right: 0; 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%; } @media max-width:768px{ .list-div li.animate{ visibility: visible; } .list-div { display: flex; justify-content: center; align-items: center; } } 

 <div class="container"> <div class="half-width"> <div class="half-width-content" id="list-cont"> <div class="list-div"> <ul> <li>Entry A</li> <li>Entry B</li> <li>Entry C</li> <li>Entry D</li> </ul> </div> </div> </div> </div> 

Short picutre to clarifiy:

Answer 1

You can use the following

 body { margin:0; } .container { display:flex; flex-wrap:wrap; flex-direction:row; height:100vh; background-color: beige; } .container > div { min-height: 100vh; border:1px solid black; box-sizing:border-box; background-color: inherit; } .half-width { width:50%; } .half-width > .half-width-content{ position: relative; margin-top: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .list-div { position: relative; display: flex; justify-content: center; align-items: center; width: 75%; height: 75%; } .list-div ul { padding: 0; margin-top: 15%; width: 75%; } .list-div li { position: absolute; } .list-div li:nth-child(1){ top: 0; left: 0; background: url(https://fakeimg.pl/30x30/?text=A); list-style-type: none; padding-top: 40px; box-sizing: border-box; text-align:center; vertical-align: middle; background-repeat: no-repeat; background-position-x: 50%; width:100px; } .list-div li:nth-child(2){ top: 0; right: 0; background: url(https://fakeimg.pl/30x30/?text=B); list-style-type: none; padding-top: 40px; box-sizing: border-box; text-align:center; vertical-align: middle; background-repeat: no-repeat; background-position-x: 50%; width:100px; } .list-div li:nth-child(3){ bottom: 0; left: 0; background: url(https://fakeimg.pl/30x30/?text=C); list-style-type: none; padding-bottom: 40px; box-sizing: border-box; text-align:center; vertical-align: middle; background-repeat: no-repeat; background-position-x: 50%; background-position-y: 100%; width:100px; } .list-div li:nth-child(4){ bottom: 0; right: 0; background: url(https://fakeimg.pl/30x30/?text=D); list-style-type: none; padding-bottom: 40px; box-sizing: border-box; text-align:center; vertical-align: middle; background-repeat: no-repeat; background-position-x: 50%; background-position-y: 100%; width:100px; } @media max-width:768px{ .list-div li.animate{ visibility: visible; } .list-div { display: flex; justify-content: center; align-items: center; } } 

 <div class="container"> <div class="half-width"> <div class="half-width-content" id="list-cont"> <div class="list-div"> <ul> <li>Entry A</li> <li>Entry B</li> <li>Entry C</li> <li>Entry D</li> </ul> </div> </div> </div> </div> 

Answer 2

You need to change background-position of list like below:-

 body { margin:0; } .container { display:flex; flex-wrap:wrap; flex-direction:row; height:100vh; background-color: beige; } .container > div { min-height: 100vh; border:1px solid black; box-sizing:border-box; background-color: inherit; } .half-width { width:50%; } .half-width > .half-width-content{ position: relative; margin-top: 0; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; } .list-div { position: relative; display: flex; justify-content: center; align-items: center; width: 75%; height: 75%; } .list-div ul { padding: 0; margin-top: 15%; width: 75%; text-align: center; } .list-div li { position: absolute; } .list-div li:nth-child(1){ top: 0; left: 0; background: url(https://fakeimg.pl/30x30/?text=A); list-style-type: none; margin: 0; padding: 41px 10px 10px 48px; vertical-align: middle; background-repeat: no-repeat; background-position: 55px 2px; } .list-div li:nth-child(2){ top: 0; right: 0; background: url(https://fakeimg.pl/30x30/?text=B); list-style-type: none; margin: 0; padding: 41px 10px 10px 48px; vertical-align: middle; background-repeat: no-repeat; background-position: 55px 2px; } .list-div li:nth-child(3){ bottom: 0; left: 0; background: url(https://fakeimg.pl/30x30/?text=C); list-style-type: none; margin: 0; padding: 10px 10px 42px 48px; vertical-align: middle; background-repeat: no-repeat; background-position: 50px 54px; } .list-div li:nth-child(4){ bottom: 0; right: 0; background: url(https://fakeimg.pl/30x30/?text=D); list-style-type: none; margin: 0; padding: 10px 10px 42px 48px; vertical-align: middle; background-repeat: no-repeat; background-position: 50px 54px; } @media max-width:768px{ .list-div li.animate{ visibility: visible; } .list-div { display: flex; justify-content: center; align-items: center; } } 

  <div class="container"> <div class="half-width"> <div class="half-width-content" id="list-cont"> <div class="list-div"> <ul> <li>Entry <br>A</li> <li>Entry <br>B</li> <li>Entry <br>C</li> <li>Entry <br>D</li> </ul> </div> </div> </div> </div> 

Answer 3

As I understood your code now is displaying inline (bullet - Name - Letter). And you want it one over the other.

So a quick idea is.

Create a Div. With 3 li inside. And add the bullet as an image or icon (themify icons for example)

<div> 
<li>image dot</li>
<li> Text </li>
<li> text </li>
</div

Hope was this your need. You can keep the css, should work

Thanks