码迷,mamicode.com
首页 > Web开发 > 详细

图片与文字居中对齐css

时间:2020-04-04 20:53:31      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:idt   code   line   fill   current   span   cal   方法   示例   

图片与文字居中对齐css

* 方法

1. 给图片和文字元素都设置:`vertival-align:center`

* 示例

1. HTML

```html
<h3>
  <svg
    fill="none"
    stroke="currentColor"
    stroke-linecap="round"
    stroke-linejoin="round"
    stroke-width="2"
    viewBox="0 0 24 24"
    class="w-8 h-8"
  >
    <path
      d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"
    />
  </svg>
  <span>待办事项</span>
</h3>
```

2. CSS

```css
span {
  vertical-align: middle;
}
svg {
  width: 25px;
  vertical-align: middle;
}
```

图片与文字居中对齐css

标签:idt   code   line   fill   current   span   cal   方法   示例   

原文地址:https://www.cnblogs.com/hgwq/p/12633717.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!