Как идеально центрировать квадратный SVG внутри квадратной кнопки?
ПРИМЕЧАНИЕ. этот вопрос был закрыт как дубликат этого вопроса о центрировании текста внутри блока div. Мой вопрос касается центрирования SVG внутри кнопки. Кнопки, по-видимому, имеют множество скрытых свойств, которые делают это намного сложнее, чем центрирование внутри простого элемента div.
Я попробовал использовать это решение, чтобы центрировать квадратный SVG внутри квадратной кнопки (конечно, по горизонтали и вертикали). Основное отличие заключается в том, что в решении система координат viewBox SVG другая (но все еще квадратная). Кроме того, я указываю ширину и высоту кнопки (хотя она все еще квадратная). Решение продемонстрировало, что оформление кнопки поиска с помощью padding: 0 устранило проблему.
Однако для меня SVG явно ближе к верху, чем к низу, как показывает красный контур. (Он также может быть ближе к левому, чем к правому, но это может быть оптической иллюзией.)
Я постарался исключить из этого примера все несущественные стили. Что нужно, чтобы SVG был идеально центрирован внутри кнопки?
#search-button {
align-items: center;
width: 3em;
height: 3em;
padding: 0; /* one solution used this */
}
#search-button-svg {
outline: 1px dotted red;
width: 2em;
height: 2em;
}<button type = "submit" id = "search-button">
<svg id = "search-button-svg"
xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 512 512">
<path d = "M416 208c0 45.9-14.9 88.3-40
122.7L502.6 457.4c12.5 12.5 12.5 32.8 0
45.3s-32.8 12.5-45.3
0L330.7 376c-34.4 25.2-76.8 40-122.7
40C93.1 416 0 322.9 0
208S93.1 0 208 0S416 93.1 416 208zM208
352a144 144 0 1 0
0-288 144 144 0 1 0 0 288z"/>
</svg>
</button>Какой браузер вы используете? Safari на IOS еще менее централизован. Разные браузеры оформляют кнопки по-разному, поэтому вам может потребоваться удалить все потенциальные стили, прежде чем начинать заново.
Это не должно быть связано с центрированием текста в элементе div. Для кнопок с SVG вы хотите иметь возможность установить размер кнопки и отступ: 0, то есть 3 строки CSS для кнопки, а SVG будет 100%, что по умолчанию, поэтому CSS на кнопке нет. SVG требуется, когда вы устанавливаете атрибут inert в SVG jsfiddle.net/WebComponents/9143afeL (я не знаю, делает ли Сарари это по-другому, тогда это должна быть ошибка) Размер/дополнение SVG с помощью SVG, а не CSS
@Danny'365CSI'Engelman Я не понимаю, что вы имеете в виду, говоря о ссылке на центрированный текст в div.
Ваш вопрос закрыт Поли ссылкой на другой вопрос SO о центрировании текста в div.
@Danny'365CSI'Энгельман Согласен. Как вы говорите, речь идет о кнопках с SVG, а не о тексте в div.
Ответы 3
Мне не удалось заставить работать предложенный гибкий интерфейс, и я заметил, что ваши элементы align-items не влияют на приведенный вами код.
Вместо этого этот фрагмент прибегает к старомодному позиционированию с помощью перевода, устанавливая svg в положение: абсолютное, чтобы оно не влияло на кнопку.
#search-button {
width: 3em;
height: 3em;
padding: 0;
/* one solution used this */
position: relative;
}
#search-button-svg {
outline: 1px dotted red;
width: 2em;
height: 2em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<button type = "submit" id = "search-button">
<svg id = "search-button-svg"
xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 512 512">
<path d = "M416 208c0 45.9-14.9 88.3-40
122.7L502.6 457.4c12.5 12.5 12.5 32.8 0
45.3s-32.8 12.5-45.3
0L330.7 376c-34.4 25.2-76.8 40-122.7
40C93.1 416 0 322.9 0
208S93.1 0 208 0S416 93.1 416 208zM208
352a144 144 0 1 0
0-288 144 144 0 1 0 0 288z"/>
</svg>
</button>Просто хочу отметить, что это был единственный метод, который я смог найти, который давал разумный вид в Safari IOS, где стиль кнопки по умолчанию отличается от стиля Chrome/Edge, например. Окна.
Убедитесь, что line-height внутри кнопки также равен нулю.
#search-button {
width: 3em;
height: 3em;
line-height: 0;
padding: 0;
}
#search-button > svg {
outline: 1px dotted red;
width: 2em;
height: 2em;
}<button type = "submit" id = "search-button">
<svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 512 512"><path d = "M416 208c0 46-15 88-40 123l127 126a32 32 0 0 1-46 46L331 376a208 208 0 1 1 85-168zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
</button>Кажется, это нормально для Edge/Chrome, но в Safari IOS svg находится немного за пределами кнопки.
Настройте SVG для отображения блока, а затем замените ширину и высоту кнопки на поле в SVG.
#search-button {
padding: 0;
margin: 0;
}
#search-button-svg {
outline: 1px dotted red;
width: 2em;
height: 2em;
display: block;
margin: calc(.5em - 2px); /* subtract the width of the border of the button */
}<button type = "submit" id = "search-button">
<svg id = "search-button-svg"
xmlns = "http://www.w3.org/2000/svg"
viewBox = "0 0 512 512">
<path d = "M416 208c0 45.9-14.9 88.3-40
122.7L502.6 457.4c12.5 12.5 12.5 32.8 0
45.3s-32.8 12.5-45.3
0L330.7 376c-34.4 25.2-76.8 40-122.7
40C93.1 416 0 322.9 0
208S93.1 0 208 0S416 93.1 416 208zM208
352a144 144 0 1 0
0-288 144 144 0 1 0 0 288z"/>
</svg>
</button>Кажется, это нормально для Edge/Chrome, но в IOS Safari кнопка оказывается шире своей высоты.
Ошибка... Кнопка уже отображает встроенный блок по умолчанию - помогает ли установка поля на ноль? @AHaworth
@chrwahl: Вы можете исправить эту проблему с сафари iOS, добавив к кнопке свойство -webkit-appearance:none. Описанное дополнение относится к стилям кнопок Safari по умолчанию.
@chrwahl Вышеупомянутое предложение -webkit-appearance: none, кажется, решает проблему iOS Safari. Что такого особенного в вашем решении, из-за которого ваша кнопка отображается немного больше, чем в других решениях (в настольных браузерах)?
@Chap, разница заключается в границе кнопки. В этом примере я теперь вычитаю 2 пикселя от границы SVG, так что в итоге кнопка будет иметь ширину и высоту 2 пикселя.
Используйте гибкую настройку кнопки или
calc(size - x)x = отступы границы (px), поля...