Text & Image Alignment 1

div {align-items:center;}

HTML

<div class="breadcrumb-menu">
    <ul class="breadcrumb-steps">
      <div class="center">
        <li class="step active">StepOne</li>
        <p class="dot dot-active">
        
        </p>
        </div>
        <li class="step">StepTwo</li>
        <li class="step">AnotherStep</li>
        <li class="step">Someotherstep</li>
    </ul>
</div>

CSS

.dot {
  position:absolute;
  height: 5px;
  width: 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  top: 33px;
}

.dot-active {
  background-color: #fff;
}

.center {
  text-align: center;
}

.breadcrumb-menu {
    padding: 10px 20px;
    background-color: #1E1E1E;
    width: 488px;
}


.breadcrumb-steps {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
}

    /* Individual breadcrumb step styles */
    .breadcrumb-steps .step {
        color: #6c757d; /* Default gray color */
        text-transform: uppercase; /* Capitalize text */
        font-size: 14px;
        font-weight: bold;
        padding: 5px 15px;
        position: relative; /* Enable positioning for pseudo-elements */
        cursor: pointer;
        text-align: center;
    }

        /* Dashed line with dots below each word */
        .breadcrumb-steps .step::after {
            content: ''; /* No visible text, only styling */
            position: absolute;
            bottom: -8px; /* Position below the text */
            left: 50%; /* Start at the center of the word */
            width: 130px; /* Total width of the dashed line */
            height: 1px; /* Line height */
            background: repeating-linear-gradient( to right, #6c757d, #6c757d 2px, transparent 4px, transparent 6px ); /* Creates the dashed line with dots */
            display: block;
        }

       
        .breadcrumb-steps .step.active {
            color: #fff;
        }

        /* Hover effect */
        .breadcrumb-steps .step:hover {
            color: #ffffff; /* White on hover */
        }