Почему img стоит не по центру button?

Question

[rensly]

Почему SVG иконка добавленая через img src="" в button отображается не по центру?


HTML:

<button id="new-tab" title="New Tab">
	<img src="assets/images/ui/plus.svg" title="New Tab">
</button>

CSS:

button {
	width: 30px;
	height: 30px;
	text-align: center;
	align-items: center;
	justify-content: center;
}

Пытался и для img сделать все тоже самое, но ничего не дало.

Answer 1

[Mizutsune]

Конечно неплохо было бы добавить кнопке отдельный класс и уже дальше стилизовать кнопку по селектору класса, а не по имени тега. Ну это так, скорее рекомендация.

А так по поводу вопроса, то можно сделать например вот так:

button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Comments

[rensly]

все равно стоит немного выше чем нужно, еще и кнопка стала прямоугольной

[Mizutsune]

wz, задайте изображению фиксированные размеры. Например width: 20px & height: 20px;

[rensly]

Mizutsune, тоже самое.

#new-tab {
	display: flex;
	align-items: center;
	justify-content: center;
}

#new-tab img {
	width: 20px;
	height: 20px;
}

(#new-tab - кнопка)

[rensly]

wz, а нет, добавил к кнопке width и height и пофиксилось. спасибо.

[Mizutsune]

woidzero, да, параметры width и height нужны для кнопки, чтобы иконка корректно встала по центру.