css - 将图标和两行文本与物化 css 对齐
问题描述
我需要将图标与两行文本对齐,我使用的是 MaterilizeCSS。这是我的代码,但我无法解决。
有任何想法吗?
<div class="col s12 m3 center">
<i class="material-icons">access_time</i>
<span>Horario</span><br>
<span>Helper text</span>
</div>
附上图片来更好地解释我自己
解决方案
.d-flex {
display: flex
}
.text {
flex-direction: column;
margin-left: 10px;
}
.fa-map-marker.marker {
font-size: 35px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="col s12 m3 center d-flex">
<i class="fa fa-map-marker marker"></i>
<div class="d-flex text">
<span>Horario</span>
<span>Helper text</span>
</div>
</div>
推荐阅读
- javascript - javascript将月数添加到特定日期格式
- python - 正则表达式否定不起作用Python
- ios - 使用故事板和视图控制器创建 iOS 自定义框架
- winapi - 导入WinRT winmd时如何获取接口的Interface ID(IID,即GUID)?
- react-native-navigation - 将 ThemeProvider 包装到 wix react-native-navigation V2
- haskell - Cabal 安装音乐套件的问题
- c# - Visual Studio npm 安装错误的目录?Angular 中的 SPA
- javascript - 使用变量在组件中设置样式背景图像
- arrays - Python:附加一个列表,其中包含在函数中评估为真的元素
- javascript - 使用 JavaScript 从每个元素中删除隐藏类