компонентов ауры молнии — выравнивание по вертикали: середина не работает должным образом
спросил
Изменено
2 месяца назад
Просмотрено
1к раз
У меня есть код ниже, он работает нормально, проблема возникает, когда я скрываю кнопку молнии: css не работает.
Я пробовал несколько способов, но не смог установить значок и текстовый элемент div посередине. Пожалуйста, помогите мне решить эту проблему. Большое спасибо.
Вам нужно будет проверить свою консоль разработчика и проверить, какие стили «переопределяются», изменены и исправить их. Здесь мало что можно сделать, не видя, какие именно стили переопределяются.
Вы проверяли в браузере перед добавлением свойства?
Каково ожидаемое поведение в браузере и после применения его в вашем компоненте, оно такое же?
не работает должным образом возможно, он работает именно так, как должен, вам нужно будет описать, что вы ожидали от объекта.
После быстрого просмотра вашего кода я заметил, что ваше абсолютное позиционирование является частью проблемы. вообще говоря, вы хотите избежать использования пользовательского css, если вы не очень хорошо с ним разбираетесь, и попытаться использовать SLDS, а также встроенный компонент макета молнии. Например, Lightning-layout поможет вам создать контейнер. образец документации:
<шаблон>
В этом примере создается простой макет с заголовками полей.
, если вы просмотрите документацию, вы сможете понять тот же макет, который вы пытаетесь использовать, без пользовательского CSS, кроме того, вы также можете обратиться к чертежам SLDS для образцов компонентов, для вашего случая использования, там похоже на сходство с заголовком Blueprint, на который вы можете ссылаться для аналогичного компонента: вы всегда можете удалить html, который вам не нужен.
3
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой использования файлов cookie
.
Выравнивание встроенных элементов по вертикали | Советы по веб-дизайну и разработке
Выравнивание встроенных элементов по вертикали
30 ноября 2009 г., 8:00
Свойство vertical-align предназначено для выравнивания встроенных элементов по общему элементу на той же строке. Например, вы можете выровнять текст по верху, середине, базовой линии или низу более крупного текста или изображения на той же строке.
Вот допустимые пары «свойство-значение»:
vertical-align:top — Выравнивание по верхнему краю строки. Если высота строки выше, чем общий элемент, это местоположение выше, чем vertical-align:text-top. Если высота строки одинакова, top и text-top находятся в одном и том же месте.
vertical-align:text-top — Выравнивание по верхнему краю текстовых символов с диакритическими знаками, такими как á и Á. Это место одинаково, независимо от того, есть ли у персонажей акценты или нет.
vertical-align:middle — Выравнивание по середине буквы x.
vertical-align:baseline — Выравнивание по базовой линии, которая является нижним краем символов, не имеющих выносных элементов, таких как буква A.
vertical-align:bottom — Выравнивание по нижнему краю строки. Если высота строки ниже, чем общий элемент, это местоположение ниже, чем вертикальное выравнивание:текстовое низ. Если высота строки одинакова, верхняя и нижняя части текста находятся в одном и том же месте.
vertical-align:text-bottom — Выравнивание по нижнему краю текста, в том числе по нижнему краю символов, имеющих выносные элементы, таких как буква g. Это расположение одинаково независимо от того, есть ли у символов спусковые элементы или нет.
Пример 1
В этом примере текст выравнивается по верхнему, среднему, базовой линии и нижнему краю общего элемента, представляющего собой графику, за которой следует большой текст белого цвета на синем фоне. Используются символы с диакритическими знаками и нисходящими элементами, чтобы вы могли видеть, как они выравниваются. В примере 2 показано, как они выравниваются по верху и низу вместо text-top и text-bottom.
CSS
Обратите внимание, что высота строки (80 пикселей) t выше, чем общий элемент (60 пикселей), и в этом e
В этом примере текст выравнивается по середине и базовой линии общего элемента, представляющего собой графику, за которой следует большой текст белого цвета на синем фоне. Он также использует верх и низ для выравнивания текста по верху и низу строки, которая выше и ниже обычного элемента. Используются символы с диакритическими знаками и нисходящими элементами, чтобы вы могли видеть, как они выравниваются. Обратите внимание, что выравнивание по верху и низу выравнивает выше и ниже соответственно, чем text-top и text-bottom в примере 1.
В примере 2 показано, как они выравниваются по верху и низу вместо text-top и text-bottom.
ÁáxXg
Он также использует верх и низ для выравнивания текста по верху и низу строки, которая выше и ниже обычного элемента. Используются символы с диакритическими знаками и нисходящими элементами, чтобы вы могли видеть, как они выравниваются. Обратите внимание, что выравнивание по верху и низу выравнивает выше и ниже соответственно, чем text-top и text-bottom в примере 1.