Центральный заполнитель типа span
Я создал диапазон, который выступает в качестве заполнителя для figcaption. Я пытаюсь центрировать заполнитель, но он создает некоторые отступы (не уверен), которые я не могу контролировать.
Вот ссылка на песочницу кода.
песочница
Я попытался закомментировать свойство width:0, которое действительно центрировало заголовок, но теперь фокус ведет себя неправильно.
Это реагирующий компонент для span, который выступает в качестве заполнителя.
<span
contentEditable = {false}
style = {{
pointerEvents: "none",
display: "inline-block",
width: "0",
maxWidth: "100%",
whiteSpace: "nowrap",
opacity: "0.333"
}}
>
Figure Caption
</span>
Чтобы воспроизвести ошибку, откройте песочницу, поместите курсор в редактор и нажмите кнопку insert image. Как только вы нажмете на нее, вставится изображение с подписью. Заполнитель внутри него не центрирован.
У вас есть первоначальная проблема, когда фокус работает неправильно, а с width: 0 он исчезает? ... но теперь он не будет центрироваться. Обнуление ширины элемента не является хорошим способом решения проблем, вместо этого укажите проблему с "неправильное поведение фокуса", иначе вы, скорее всего, столкнетесь с другими проблемами с тем, как все будет отображаться.
Ответы 1
Просто уберите width: "0" из настроек. В центрированном родительском и дочернем элементах width:0 для дочернего элемента блока (или встроенного блока) помещает его в центр родителя (фактически он помещает левый элемент в центр родителя), и если он содержит текст или любой тип контента, контент будет увеличиваться вправо (контент выходит за пределы элемента нулевой ширины).
Чтобы решить проблему с фокусом, есть несколько обходных путей:
Первая идея: с помощью margin-left. Вы по-прежнему можете использовать width:0, но вы должны установить margin-left равным половине ширины текста подписи. Эта идея требует дополнительного кода для расчета динамической ширины подписи при изменении текста (событие onKeyup).
Другая идея: Удалите width:0 но: скройте заголовок по умолчанию, как только пользователь нажмет на ссылку, и снова установите ее, если пользовательский ввод был нулевым. Вы можете сохранить подпись по умолчанию в теге data-caption, чтобы легко восстановить ее.
Я посмотрел в хроме, я получаю фиговую надпись в центре