Вот несколько простых методов для вертикального выравнивания:
Это легко: установите высоту строки текстового элемента в равный таковому для контейнера
Doesn't work.
Абсолютно поместите внутренний div относительно его контейнера
This is positioned on the bottom
This is positioned in the middle
Чтобы заставить это работать правильно по всем направлениям, придется немного взломать CSS. К счастью, есть ошибка IE, которая работает в нашу пользу. Устанавливая top:50%
на контейнере и top:-50%
на внутреннем div, вы можете добиться того же результата. Мы можем комбинировать эти два варианта с помощью другой функции, IE не поддерживает: расширенные селектора CSS.
Works in everything!
Это решение требует немного более современного браузер, чем другие решения, поскольку он использует свойство transform: translateY
. ( http://caniuse.com/#feat=transforms2d )
Применение следующих трех строк CSS к элементу будет вертикально центрировать его внутри родителя независимо от высоты родительский элемент:
position: relative;
top: 50%;
transform: translateY(-50%);
Ну, это можно сделать разными способами. Итак, у вас есть коробка, а внутри коробки есть имя. Это то, что я бы попробовал сначала: вы можете разделить изображение на две горизонтальные стороны:
Затем возьмите верхнюю половину и получите самый левый пиксель, который соответствует цвету, отличному от фона, который вы можете получить, используя imagecolorat()
.
Это даст вам следующие очки:
Что я считаю более реалистичным, чем присоединение цепочки к K
, так как это было бы неуравновешенным.
Я не знаю, будет ли это работать в каждом отдельном случае, но вы можете настроить фазу разделения, чтобы получить более высокие или более низкие баллы. Дайте мне знать, что вы думаете.
Нужно придумать хороший способ проверить цвета пикселей, не проверяя каждый из них.