Как отцентрировать по вертикали и горизонтали изображение и текст одновременно?

Question

[sergey]

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

Answer 1

[Ivan Bogachev]

"No-flex-style" codepen.io/sfi0zy/pen/ONqqON

Comments

[sergey]

повторюсь этот прием не рекомендуют использовать при изменениях размера блока, у вас же автоматически появится вторая строчка и line-height покажет куда упадет картинка

[Ivan Bogachev]

SM: Поправил пример. К слову, если вам нужна такая надпись на маленьком экране - быть может шрифт немного уменьшить, а не увеличивать размер самой кнопки доп. строчками? - это и вертикальную сетку в дизайне ломать не будет

Answer 2

[GreatRash]

https://jsfiddle.net/o6w3qyjw/

Comments

[sergey]

попробуйте это за адаптивить

[GreatRash]

SM: Не вижу проблем.

[sergey]

GreatRash: а я вижу

[GreatRash]

SM: Так потрудитесь описать условия, при которых должно работать, подробней. При тех условиях, что вы описали (т.е. не описали вообще ничего) проблем нет.

[sergey]

GreatRash: если внимательно читали, то было написано одновременно центрировать текст и изображение в резиновом блоке (это подразумевает изменение ширины блока, и соответственно возникновение второй строки...)

[sergey]

GreatRash: ваше решение интересное, но с flex правильней

[Ivan Bogachev]

SM: Все так говорят, пока не придется поддерживать IE: caniuse.com/#feat=flexbox

[sergey]

Ivan Bogachev: IE вообще отсылаем за полярный круг:)))

[GreatRash]

SM: Я читал внимательно, но требований к браузерам не увидел. А ведь это первое, что вам надо было бы указать. Про вторую строку опять же ни слова: откуда я знаю, может у вас nowrap строит или есть минимальная ширина контента (320px к примеру для мобил), или допустим размер шрифта тоже адаптивный...

Так то если ИЕ идёт лесом, то флексы конечно удобней всего. Опять же display: table; подошел бы, но нужно ещё один элемент добавлять в разметку.

Answer 3

[Сергей]

В первый стиль положи:
text-align: center;

Comments

[sergey]

не пойдет, в одну строчку надо все разместить

[Сергей]

SM: ой)) не дочитал до конца вопрос))

Answer 4

[stasov1]

Можно без флекса

.header__login{
  width: 40%;
  height: 50px;
  border: 1px solid;
  position: relative;
  text-align: center;
  line-height: 50px;
}

Comments

[sergey]

ну это не очень кросбраузерно, при уменьшении блока вообще будет аяяй, читал только недавно что не рекомендуют использовать этот прием для многострочного текста

[stasov1]

SM: при чем тут кроссбраузерность? вы наверное имели ввиду адаптивность.... MaxKorz: На счет того что решение не очень - согласен. В данном контексте для одной кнопки можно применить и такое решение.