svg to middle of div in ul tag-CodePudding

So I've made this <ul>/<li>, and I've made a text with a svg image beside it. But as you can see, if the width of the <ul>, isn't wide enough, the text goes into two line, THIS is okay. BUT the svg image is in the top of the div, and I want it top be 50% of the top.

NOTE: the style="width:300px;" is just to make a default smaller width of the <ul>.

How can I move the svg down to the middle?

#svg_dashboard_weather {
    position: relative;
    width: 25px;
    height: 25px;
    float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<ul id="tog_nr-<?php echo $testJobId; ?>" style="width:300px;" class="list-group list-group-flush rounded" >
<li id="3_1" class="list-group-item list-group-item-success">
                        <a class="text-dark" href="testresults?dashboardIds=3,1,1" target="_blank">
                            <div class="overflow-hidden">
                                
                <div id="svg_dashboard_weather" class="d-flex" title="5/5">
                    <svg xmlns="http://www.w3.org/2000/svg" id="weather-sunny">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(1.000000, 0.000000)" fill="#0b6aa2" fill-rule="nonzero">
                                <path d="M10.8,6 C14.1137085,6 16.8,8.6862915 16.8,12 C16.8,15.3137085 14.1137085,18 10.8,18 C7.4862915,18 4.8,15.3137085 4.8,12 C4.8,8.6862915 7.4862915,6 10.8,6 M10.8,8.4 C8.8117749,8.4 7.2,10.0117749 7.2,12 C7.2,13.9882251 8.8117749,15.6 10.8,15.6 C12.7882251,15.6 14.4,13.9882251 14.4,12 C14.4,10.0117749 12.7882251,8.4 10.8,8.4 M10.8,0 L13.668,4.104 C12.7487597,3.76983548 11.7780941,3.59925827 10.8,3.6 C9.792,3.6 8.82,3.78 7.932,4.104 L10.8,0 M0.408,6 L5.4,5.58 C4.65522041,6.20908528 4.02228249,6.95968473 3.528,7.8 C3,8.688 2.7,9.6 2.532,10.548 L0.408,6 M0.432,18 L2.544,13.476 C2.89665685,15.4110521 3.90525776,17.1655091 5.4,18.444 L0.432,18 M21.18,6 L19.056,10.548 C18.7161518,8.60491495 17.7054771,6.8426039 16.2,5.568 L21.18,6 M21.168,18 L16.2,18.432 C16.908,17.82 17.544,17.064 18.048,16.2 C18.552,15.324 18.876,14.4 19.044,13.452 L21.168,18 M10.8,24 L7.908,19.872 C8.796,20.196 9.768,20.4 10.8,20.4 C11.784,20.4 12.756,20.196 13.644,19.872 L10.8,24 Z" id="Shape">
                                </path>
                            </g>
                        </g>
                    </svg>
                </div>
                <span>1 - Config.SlaveMinimumReplyDelay</span>                            </div>
                        </a>
                    </li>
                    </ul>

I want is to look like this:

CodePudding user response：

You can use Flexbox on container, in your case the div .overflow-hidden. Order property is used to change order for the flex elements

#svg_dashboard_weather {
  position: relative;
  width: 25px;
  height: 25px;
  order: 2; /* this change order of elements */
}

.overflow-hidden {
  display: flex;
  justify-content: center;/* this 2 properties is used to center vertically and horizontally */
  align-items: center;
}

.overflow-hidden span {
  order: 1;  /* this change order of elements */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<ul id="tog_nr-<?php echo $testJobId; ?>" style="width:300px;" class="list-group list-group-flush rounded">
  <li id="3_1" class="list-group-item list-group-item-success">
    <a class="text-dark" href="testresults?dashboardIds=3,1,1" target="_blank">
      <div class="overflow-hidden">

        <div id="svg_dashboard_weather" class="d-flex" title="5/5">
          <svg xmlns="http://www.w3.org/2000/svg" id="weather-sunny">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g transform="translate(1.000000, 0.000000)" fill="#0b6aa2" fill-rule="nonzero">
                                <path d="M10.8,6 C14.1137085,6 16.8,8.6862915 16.8,12 C16.8,15.3137085 14.1137085,18 10.8,18 C7.4862915,18 4.8,15.3137085 4.8,12 C4.8,8.6862915 7.4862915,6 10.8,6 M10.8,8.4 C8.8117749,8.4 7.2,10.0117749 7.2,12 C7.2,13.9882251 8.8117749,15.6 10.8,15.6 C12.7882251,15.6 14.4,13.9882251 14.4,12 C14.4,10.0117749 12.7882251,8.4 10.8,8.4 M10.8,0 L13.668,4.104 C12.7487597,3.76983548 11.7780941,3.59925827 10.8,3.6 C9.792,3.6 8.82,3.78 7.932,4.104 L10.8,0 M0.408,6 L5.4,5.58 C4.65522041,6.20908528 4.02228249,6.95968473 3.528,7.8 C3,8.688 2.7,9.6 2.532,10.548 L0.408,6 M0.432,18 L2.544,13.476 C2.89665685,15.4110521 3.90525776,17.1655091 5.4,18.444 L0.432,18 M21.18,6 L19.056,10.548 C18.7161518,8.60491495 17.7054771,6.8426039 16.2,5.568 L21.18,6 M21.168,18 L16.2,18.432 C16.908,17.82 17.544,17.064 18.048,16.2 C18.552,15.324 18.876,14.4 19.044,13.452 L21.168,18 M10.8,24 L7.908,19.872 C8.796,20.196 9.768,20.4 10.8,20.4 C11.784,20.4 12.756,20.196 13.644,19.872 L10.8,24 Z" id="Shape">
                                </path>
                            </g>
                        </g>
                    </svg>
        </div>
        <span>1 - Config.SlaveMinimumReplyDelay</span> </div>
    </a>
  </li>
</ul>

Or without changind the order, but modify the order of elements in the html

    #svg_dashboard_weather {
      position: relative;
      width: 25px;
      height: 25px;
      
    }

    .overflow-hidden {
      display: flex;
      justify-content: center;/* this 2 properties is used to center vertically and horizontally */
      align-items: center;
    }

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
    <ul id="tog_nr-<?php echo $testJobId; ?>" style="width:300px;" class="list-group list-group-flush rounded">
      <li id="3_1" class="list-group-item list-group-item-success">
        <a class="text-dark" href="testresults?dashboardIds=3,1,1" target="_blank">
          <div class="overflow-hidden">
            <!-- moved span here -->
            <span>1 - Config.SlaveMinimumReplyDelay</span>
            <div id="svg_dashboard_weather" class="d-flex" title="5/5">
              <svg xmlns="http://www.w3.org/2000/svg" id="weather-sunny">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g transform="translate(1.000000, 0.000000)" fill="#0b6aa2" fill-rule="nonzero">
                                    <path d="M10.8,6 C14.1137085,6 16.8,8.6862915 16.8,12 C16.8,15.3137085 14.1137085,18 10.8,18 C7.4862915,18 4.8,15.3137085 4.8,12 C4.8,8.6862915 7.4862915,6 10.8,6 M10.8,8.4 C8.8117749,8.4 7.2,10.0117749 7.2,12 C7.2,13.9882251 8.8117749,15.6 10.8,15.6 C12.7882251,15.6 14.4,13.9882251 14.4,12 C14.4,10.0117749 12.7882251,8.4 10.8,8.4 M10.8,0 L13.668,4.104 C12.7487597,3.76983548 11.7780941,3.59925827 10.8,3.6 C9.792,3.6 8.82,3.78 7.932,4.104 L10.8,0 M0.408,6 L5.4,5.58 C4.65522041,6.20908528 4.02228249,6.95968473 3.528,7.8 C3,8.688 2.7,9.6 2.532,10.548 L0.408,6 M0.432,18 L2.544,13.476 C2.89665685,15.4110521 3.90525776,17.1655091 5.4,18.444 L0.432,18 M21.18,6 L19.056,10.548 C18.7161518,8.60491495 17.7054771,6.8426039 16.2,5.568 L21.18,6 M21.168,18 L16.2,18.432 C16.908,17.82 17.544,17.064 18.048,16.2 C18.552,15.324 18.876,14.4 19.044,13.452 L21.168,18 M10.8,24 L7.908,19.872 C8.796,20.196 9.768,20.4 10.8,20.4 C11.784,20.4 12.756,20.196 13.644,19.872 L10.8,24 Z" id="Shape">
                                    </path>
                                </g>
                            </g>
                        </svg>
            </div>
             </div>
        </a>
      </li>
    </ul>