html - 垂直对齐div内的列表项
问题描述
我想在 div 中垂直对齐列表项,这就是我的代码:
<div>
<div class="span4">
<img style="float: left; width: 80px;" src="http://www.zalfaniyamen.com/wp-content/uploads/2020/02/200px-Dhofar_Club.png" />
</div>
<div>
<ul class="list-group" style="margin-bottom: 0 !important;">
<li class="list-group-item active" style="margin-left: 120px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 20px; font-weight: 600; width: 60%;">
Win super cup of sultun
</li>
</ul>
</div>
</div>
<div>
<div style="clear: both;"></div>
</div>
解决方案
您能否检查以下代码,希望它能解决您的查询。
<div>
<div class="span4" style="vertical-align: middle;
display: inline-block;">
<img style="width: 80px;" src="http://www.zalfaniyamen.com/wp-content/uploads/2020/02/200px-Dhofar_Club.png" />
</div>
<div style="vertical-align: middle;
display: inline-block;">
<ul class="list-group" style="margin: 0;">
<li class="list-group-item active" style="margin-left: 120px !important; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 20px; font-weight: 600; ">
Win super cup of sultun
</li>
</ul>
</div>
</div>
<div>
<div style="clear: both;"></div>
</div>
推荐阅读
- amazon-ec2 - 尝试仅在 1 个 YAML 文件中使用 Ansible 创建具有不同资源(主要是实例类型和 AMI)的多个 AWS 实例
- php - 从 wordpress 类扩展的命名空间不起作用
- c++ - 在 C++ 中使用 system() 调用回显到文件——总是使用字符串文字而不是 > 运算符?
- php - 如何仅在 laravel 中验证电子邮件后调用引导方法
- java - 如何将字符串输入发送到 ProcessBuilder
- python - 查找字段存在或为空的文档
- javascript - 哪个是兼容的节点版本
- java - SSLContext.getInstance("TLS") 漏洞
- node.js - 如何向 apollo-server 添加额外/回调路由?
- operator-overloading - 运算符重载(例外)