sond1k
Newbie-
Posts
14 -
Joined
-
Last visited
sond1k's Achievements
Explorer (1/14)
0
Reputation
-
Спасибо большое, я наконец то понял, что вы пытались сказать. Только вот момент с "базовая линия" смещается при том или ином vertical-align туда то.. При middle логично, что в серединку. Но там значений то много, можно где то про это почитать?
-
На так потому что мы ему ставим vertical-align: middle; Вот А спецификация говорит: выравнить вертикальную среднюю точку бокса по базовой линии родителя плюс половина x-высоты. Вот здесь и видно, что красная линия (va: middle) как раз с серединой Text совпадает. Т.е. vertical-align: middle смещает базовую линию элемента и отсюда уже "дальше едем"?) Но тогда как догадаться, куда сместиться базовая линия элемента, если он пуст, например, при text-top? Так а почему вы серую X родителя нарисовали именно такого размера? Может у родителя у меня шрифт 10px а у child 20px?
-
Да, вниз конечно, я перепутал. Но вверху свободное пространство, он обратно поднялся. Половина высоты буквы x. У этого блочного элемента есть своя установленная гарнитура. Вот половина высоты буквы x в соответствии с ней и есть половина x-высоты. Но он поднялся ровненько на половину высоты блока ) Это откуда такая гарнитура? шрифт у блока parent verdana 16px, предположим Почему вы рисуете базовую линию по середине? Изначально же не было vertical-align:middle у helper, и контента в нем нет. В спеке сказано, что в таком случае его baseline по его нижней границе Я наверно не могу понять, что там с базовой линией происходит. Если я даю элементу vertical-align:middle - его базовая линия меняется?
-
ДА! То, что вы говорите - логично. Но я не могу понять логики происходящего ) 1. helper на всю высоту parent - базовая линия по нижней границе helper 2. даем helper vertical-align:middle - базовая линия была по низу helper, и если по ней центрировать середину элемента, он вниз должен уехать, а не вверх. 3. Должен подняться на x-высоту родителя. Родитель - блочный div? Откуда и как тут x-высота?))
-
хм. Т.е. x-высота определяется изнутри? А если у меня там 5 строк с 5 разными размерами шрифтов? И по поводу смещения базовой линии? Ни где ведь не сказано, кажется, что она куда то смещается? Никак не могу понять Базовая линия строки - по низу helper, если даем ему middle - он должен выровнять свой центр с ней. А потом взять половину x-высоты... И еще, в спецификации сказано, что x-высота родителя - родитель тут вообще блочный div?
-
Я понимаю, что .child выравнял свой центр по базовой линии? А как же половина высоты символа x? Почему она проигнорирована? И как .helper может сдвинуть базовую линию? Как я понимаю, vertical-align:middle для .helper должен выровнять его середину по базовой линии и опять же + половина x-высоты?
-
<div class="parent"> <div class="helper"></div> <div class="child">TEXT</div></div>.parent { height:100px; width:600px; border:1px solid #ff0000;}.helper { display:inline-block; height:100%; width:1px; background:green;}.child { display:inline-block; vertical-align:middle; border:1px solid #0000ff;}Не могу понять, как работает способ вертикального центрирования. https://jsfiddle.net/mws18yoL/ Если дать элементу .helper vertical-align:middle, то центрируется отлично. Без этого нет. Но ведь должно и без того? Высота строки задана блоком .helper в 100% от родителя. Далее известно следующее - vertical-align:middle - выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента. Базовая линия - по низу .helper + половина высоты родительского элемента. Следуя этому элемент .child должен быть сейчас центрирован, однако на деле он просто сопоставил свою середину с базовой линией. Объясните пожалуйста, чего я не понимаю??
-
Вопрос снят, разобрался!
-
Нет, к сожалению, Ваш совет приводит к тому же эффекту. Подобрать размер рамки под рамку родительского - не выходит
-
Да, я думал об этом, но, второй псевдоэлемент мне необходим для текста внутри кнопки, т.к. иначе в IE не будут наследоваться :active для родителя, если разместить текст не через псевдо элемент Хотя, странно, текст обернутый в span - active не наследуется. Текст без span - все работает, вопрос снят, спасибо
-
Добрый день! Пытаюсь сделать кнопку - вот что получилось Уголок сделан через псевдо-элемент и свойства transform:translateX(-25px)rotate(45deg)skew(10deg, 10deg)scale(0.61); Мне нужно синюю рамочку вокруг уголка - как вокруг родительского блока. Если добавлять рамку к треугольнику, то во первых из за scale она не тех размеров, во вторых портится градиент. Подскажите пожалуйста, как сделать рамку?
-
<div id="test"></div>#test { width:150px; height:60px; background:#0066ff;}#test:active { background:#ff6600;}Вот такой простейший пример. В IE фон меняется с синего на рыженький через раз. При условии кликанья через одинаковые промежутки времени. Причем если сделать паузу, скажем, секунды 2, то все уже хорошо
-
Добрый день! Вопрос следующий. Есть на странице элемент с псевдоклассом active, при клике на этом элементе должен меняться например цвет фона. Во всех браузерах все работает хорошо, однако в IE всех версий :active срабатывает через раз, т.е. фон сменился, на следующем клике фон элемента не меняется. Т.е. :active срабатывает через раз. Причем onclick срабатывает исправно, на каждом клике. Предложите пожалуйста решение, можно на JS, или подскажите, куда копать..