Как найти имя div, которое соответствует метке, используемой в инспекторе кода?
Я пытаюсь найти способ добавить margin-auto в класс css tailwinds, чтобы я мог центрировать изображение svg в контейнере. Я могу добавить атрибут в проверку кода, но не могу найти соответствующий тег div в своем коде.
Панель проверки показывает div как tailwinds.css.1, но у меня нет класса с таким именем. Я попытался добавить margin-auto к самому тегу svg и всем окружающим тегам div, а также к компоненту Logo, в котором определен svg. Ни один из них не работает для центрирования изображения.
Как я могу найти имя тега div на панели проверки?
<footer className = "bg-slate-50">
<Container>
<div className = "py-16 display-block mx-auto">
<Logo className = "display-block mx-auto" />
«Как я могу найти имя тега div на панели проверки?» - какое "имя", элементы div не имеют "имени". Вы пытаетесь спросить, какой селектор вы могли бы использовать для выбора этого элемента div? Хорошо, если у вас нет доступных классов или идентификаторов, которые позволяют нацеливаться на него напрямую, тогда найдите способ нацелить его на основе его отношения к другим элементам. Предположим, что на странице есть только один элемент footer, что-то вроде footer > div > div:first-child svg может подойти. (Я думаю, вы действительно хотите настроить таргетинг на svg, а не на родительский div.)
Я попытался добавить mx-auto как к компоненту svg, так и к компоненту Logo, а также к div вокруг Logo. Ни один из них на самом деле не центрирует SVG на экране. На снимке экрана, которым я поделился, показано, как я могу добавить margin:auto на панель css при проверке кода в консоли, чтобы центрировать svg. Я не могу найти, где добавить атрибут в код, чтобы отразить это.
Ответы 3
Для проверки требуемого компонента вы можете использовать методы DOM. Например, если вы хотите настроить таргетинг на <div className = "py-16 display-block mx-auto"> , вы можете использовать как
document.getElementByTagName("Container").getFirstElementChild()
Для центрирования логотипа вам просто нужно mx-auto только для этого компонента. Я переписал ваш код ниже.
<script src = "https://cdn.tailwindcss.com"></script>
<footer class = "bg-slate-50">
<div class = "container mx-auto"> <!-- adding the container class to the this outer div -->
<div class = "py-16 display-block">
<!-- Consider it as you LOGO component -->
<svg class = "h-6 w-6 flex-none fill-sky-100 stroke-sky-500 stroke-2 mx-auto" stroke-linecap = "round" stroke-linejoin = "round">
<circle cx = "12" cy = "12" r = "11" />
<path d = "m8 13 2.165 2.165a1 1 0 0 0 1.521-.126L16 9" fill = "none" />
</svg>
<!-- LOGO compnent ends -->
</div>
</div>
</footer>Попробуйте реализовать это, но не забудьте заменить class на className.
Также вы можете просмотреть код с более качественным предварительным просмотром здесь
Как вы можете видеть из фрагмента кода, которым я поделился выше, вокруг логотипа уже есть контейнер div. Я также попытался добавить отдельный div, в который вложен компонент Logo (только). Я попытался добавить блок отображения и mx-auto к каждому из них, и они не разрешают центрировать логотип. Скриншот, которым я поделился, показывает, что я могу центрировать его из проверки кода, но я не могу найти, куда поместить этот атрибут в коде, поэтому я задал этот вопрос.
Вы пытались изменить блок отображения только на блок вашего логотипа?
display-block не существует в tailwindcss
Я попытался добавить как блок отображения, так и mx-auto в сочетании и только с mx-auto. Я не могу поставить логотип в центр. Я могу сделать это в проверке кода, добавив margin: auto, где показано на снимке экрана, которым я поделился.
Как вы можете видеть на снимке экрана, display:block требуется, чтобы получить svg по центру. Когда я навожу курсор на него при проверке кода, справа от svg отображается поле полной ширины, и я не могу найти его источник или как его сместить.
mx-auto на svg должен помочь
https://play.tailwindcss.com/o33Y2yn5KP
да - мне пришлось поместить его в тег файла svg. Спасибо
«Панель проверки показывает div как tailwinds.css.1, но у меня нет класса с таким именем». -
tailwinds.css.1ссылается на URL-адрес этой таблицы стилей, а номер строки, с которой начинается правило... "показывает div как" - это фраза, которая изначально не имеет смысла. Кроме того, вы на самом деле проверяете не div, а svg, эта панель показывает, какие правила CSS применяются к проверяемому элементу.