html - svg到ul标签中div的中间
问题描述
所以我做了这个<ul>/<li>，我做了一个，旁边text有一个图像。svg但是正如您所看到的，如果 , 的宽度<ul>不够宽，则文本会分成两行，这没关系。但是svg image它位于顶部div，我希望它50%位于顶部。
注意：这style="width:300px;"只是为了使<ul>.
我怎样才能将svg下移到中间？
#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>我想要看起来像这样：
解决方案
您可以在容器上使用 Flexbox，在您的情况下是 div .overflow-hidden。Order 属性用于更改 flex 元素的顺序
#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>或者不改变顺序，而是修改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>推荐阅读
- mongodb - 验证模式中的 MongoDB 参考
- r - 如何根据具有字符值的条件合并行？（家庭数据）
- discord - discord.js 用 1 个命令添加 3 个角色
- authentication - 在 Google OAuth2 授权流程之后如何将 JWT 从我的后端服务器发送到我的前端
- javascript - 将元素添加到现有 Javascript 变量以在 .html 语句中使用
- laravel - Laravel VUEJS Pusher 不请求 Pusher Auth
- oracle - 在 Oracle + 上创建具有指定日期/时间格式的列
- azure - 如何使用 Rest API 为 Azure Devops 中的管道更新“YAML 的默认代理池”？
- testing - 使用 jacoco 报告示例的 0% 测试覆盖率
- c# - 即使底层 IObservable 发生变化，Observable.Do 也不会触发