图片与文字居中对齐css

图片与文字居中对齐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;
}
```

猜你喜欢

转载自www.cnblogs.com/hgwq/p/12633717.html