我有这个代码:
我使用UIKIT
的样式。
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.15.24/dist/js/uikit-icons.min.js"></script>
<div class="uk-inline uk-text-small">
<b>Jelle Botman</b><br/>
My Company
<span class="uk-icon-button uk-margin-small-right" uk-icon="user"></span>
<div uk-dropdown>
<a href=''>Profiel</a><br/>
<a href=''>Uitloggen</a>
</div>
</div>
我想要这个:
在图标旁边的中间垂直居中的文本。
问题:
- 文本未垂直居中对齐
- 我的名字和公司之间的分界线太高
我尝试了vertical-align: middle
,但没有解决我的问题。
如何在不对html
结构进行较大修改的情况下实现这一点?
1条答案
按热度按时间4nkexdtk1#
我会添加一个类
user-card
来添加自定义CSS,并使用flexbox来帮助解决您的问题。然后将用户文本放入一个容器中,这里我将其放入一个<span class="user">
。这将是左边的单元格。因为flexbox会将查尔兹显示为单元格,所以我在图标和下拉菜单周围添加了一个新的
<span>
,这将是正确的单元格。为了符合HTML,我用
<span>
替换了下拉菜单<div>
,因为通常不允许将“块”类型的元素放入“内联”类型的元素中。将
<b>
替换为<strong>
,以便也兼容HTML。