How to Vertically Align My List Items with The Bullets

How do I vertically align my list items with the bullets?

you can use pseudo-element before \ after instead, take a look at this example below:

main ul {  margin-top: 25px;}main ul li {  list-style: none;}main ul li:before {  content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");  position: relative;  top: 10px;  left: -10px}

<main>  <ul>    <li>Photography for events and portraits</li>    <li>Image editing and restoration</li>    <li>Video and audio production</li>  </ul></main>

center custom list bullet vertically

As you are using character the only idea I came into is to position char using position: relative.

However, most probably the better approach is to use display: block for :before, which I showed in snippet 2.

Snippet 1

.listItem {
  list-style: none;
}

.listItem:before {
  position: relative;
  bottom: 2px;
  content: '\25A0';
}

<ul>
  <li class="listItem">
    <a>
       A Link
    </a>
  </li>
</ul>

How do I vertically center the text in a li without affecting the list bullet?

Only list-items have markers:

The ::marker pseudo-element represents the automatically generated
marker box of a list item. (See display: list-item.)

So you need list-item:

The list-item keyword causes the element to generate a
::marker pseudo-element box with the content specified by its
list-style properties (CSS 2.1§12.5 Lists) together with a
principal box of the specified type for its own contents.

CSS Display 3 introduces some variants of list-item:

list-item block flow
list-item block flow-root
list-item inline flow
list-item inline flow-root
list-item run-in flow
list-item run-in flow-root

but it seems there is no browser support, so better use the old display: list-item.

That's why, if you use display: inline-block or display: table-cell, the markers disappear.

If you want to align the markers vertically, the CSS Lists and Counters drafts allows

li::marker {
  display: inline-block;
  vertical-align: middle;
}

However, don't expect any browser to support this yet. Instead, I would recommend hiding the markers and using a ::before pseudo-element instead:

ul {
  list-style: none;
  padding-left: 0;
}
li::before {
  content: url('image.ico');
  display: inline-block;
  vertical-align: middle;
}

Note the behavior will be like if you used list-style-position: inside, which may not look right if the list items have line breaks. You can try absolute positioning if you want to emulate list-style-position: outside.

Vertically align smaller bullets with larger text

You could just make your own bullet point and make it whatever size you want.

li{
  font-size: 15px;
  list-style-type:none;

}
li span{
  font-size: 25px;
}

ul li:before {
   content: "•";
   font-size: 80%;
   padding-right: 10px;
}

Just change around the font-size to the size you want.

jsFiddle

Align bullet point with the center of li elements

This is happening because your span element has no computed height. To fix this, we can give the span element a display set to inline-table and give that a vertical-align set to middle:

li span {
    display: inline-table;
    vertical-align: middle;
}

---

li{
    font-size: 24px;
}

li span{
    display: inline-table;
    font-size: 14px;
    vertical-align: middle;
}

.table-display{
    display: table-cell;
    vertical-align: middle;
}

<ul>
    <li>
        <span>
        Welcome to the help page
        </span>
    </li>
    
    <li>
        <span>
            <div class="table-display">
                <img src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/phone-512.png" alt="phone icon" height="64" width="64">
            </div>
            <div class="table-display">
                The Help Desk<br/>
                phone number is :<br/>
                <span style="font-weight:bold;">(+01)2 34 56 78 90</span>
            </div>
        </span>
    </li>
</ul>

How to align list item center vertically

Simple use text-align: center to center align the text horizontally.
For vertical center, you can use display: flex along with flex-direction: column and justify-content: center

See below example

.pink1 {  background-color: pink;  grid-column: 2/4;  height: auto;  font-family: sans-serif;  display: flex;  flex-direction: column; /*For handling elements vertically*/  justify-content: center; /* to Align items vertically center */  min-height: 500px; /* You can remove this. i have added  this to show the difference */
}
.pink1>h6 {  text-align: center;}
.pink1>ul {  list-style: none;  align-items: center;  margin: 0;  padding: 0}
.pink1>ul>li {  font-size: 1em;  vertical-align: middle;  text-align: center;  padding: 5px 0;
}

<div class="pink1 area">  <h6>Navigation</h6>  <ul>    <li><a href="#">HOME</a></li>    <li><a href="#">ABOUT US</a></li>    <li><a href="#">GALLERY</a></li>    <li><a href="#">EVENTS</a></li>    <li><a href="#">CONTACT US</a></li>  </ul></div>

Bullet point vertical alignment

They achieve the bullet points by adding a pseudo object before the <li> with the bullet point character which is styled and positioned with the css below

.cnt article ul li:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: '\f04d';
    color: #408c52;
    display: inline-block;
    font-family: FontAwesome;
    line-height: 3em;
    font-size: 5px;
    padding-right: 10px;
}

because the rotate raises the bullet point you need to set the centre of the transofmation to be the middle of the bullet point so that the rotate does not change the height so you need to add

transform-origin: -50%;

Hope this helps!

list item marker vertically aligned

Based on the work of Paulie-D in Vertical align custom bullets to the middle of the list content, if you use display: flex for <li>:

ul {
    list-style: none;
}

li {
    display:flex;
    align-items:center;
    border: 1px solid lightgrey;
}

li::before {
    content: "•";
    width: 1.2rem;
    text-align: left;
    vertical-align: middle;
}

<ul>
    <li>
        <div>
            item 1
            <hr>rest of text
        </div>
    </li>
    <li>item 2</li>
</ul>

---

Related Topics