центральный заполнитель типа span - PullRequest
Новая
       15

центральный заполнитель типа span

2 голосов
/ 07 мая 2019

Я создал диапазон, который действует как заполнитель для figcaption.Я пытаюсь центрировать заполнитель, но он создает некоторые отступы (не уверен), которые я не могу контролировать.Вот ссылка на код песочницы. sanbox

Я пытался закомментировать свойство width:0, которое действительно центрировало заголовок, но фокус сейчас не работает.

Это компонент реакции для диапазона, который действует какзаполнитель 

<span
 contentEditable={false}
 style={{
    pointerEvents: "none",
    display: "inline-block",
    width: "0",
    maxWidth: "100%",
    whiteSpace: "nowrap",
    opacity: "0.333"
 }}
>
 Figure Caption
</span>

Чтобы воспроизвести ошибку, пожалуйста, откройте песочницу, поместите курсор в редактор и нажмите кнопку insert image.Как только вы нажимаете на нее, вставляется изображение с подписью.Заполнитель внутри него не отцентрирован.

1 Ответ

2 голосов
/ 07 мая 2019

Просто удалите width: "0" из настроек. В центрированном родительском и дочернем элементе width:0 для дочернего элемента блока (или встроенного блока) помещает его в центр родительского элемента (фактически он помещает левую часть элемента в центр родительского элемента), и если он содержит текст или любой тип контента, контент будет расти вправо (контент переполняет элемент нулевой ширины).

Чтобы преодолеть проблему фокуса, есть несколько обходных путей:

Первая идея: с использованием margin-left. Вы все еще можете использовать width:0, но вы должны установить margin-left равным половине ширины текста заголовка. Эта идея нуждается в большем количестве кода для вычисления динамической ширины заголовка, как только изменяется текст (событие onKeyup).

Другая идея: Удалите width:0, но: Скрыть заголовок по умолчанию, как только пользователь нажмет на катион, и снова установить его, если пользовательский ввод был нулевым. Вы можете оставить заголовок по умолчанию в теге data-caption, чтобы легко его восстановить.

...