Question 45522 in CSS Question posted in
Some basic documentation can be found here.

how to find the name of the div that corresponds to the label used in the code inspector? – CSS

I am trying to find a way to add margin-auto to a tailwinds css class, so that I can center an svg image across a container. I can add the attribute in code inspect, but I cannot find the corresponding div tag in my code.

The inspect panel shows the div as tailwinds.css.1, but I don’t have a class with that name. I have tried adding margin-auto to the svg tag itself and all the surrounding div tags, as well as the Logo component in which the svg is defined. None of them work to center the image.

How can I find the name of the div tag from the inspect panel?

<footer className="bg-slate-50">
      <Container>
        <div className="py-16 display-block  mx-auto">
          
          <Logo className="display-block  mx-auto" />

enter image description here

Tags:

3

Answers


  1. 0

    In order to inspect the required component you can use the DOM methods. For example if you want to target the <div className="py-16 display-block mx-auto"> , you can use like

    document.getElementByTagName("Container").getFirstElementChild()

    For centering the Logo, you just to need the mx-auto to that component only .I have rewritten your code below.

    <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>

    Try to implement this but remember to replace class with className.

    Also you can view the code with more better preview here

    Login or Signup to reply.
  2. 0

    Did you tried to change display-block by only block on your logo component ?

    display-block doesn’t exist in tailwindcss

    Login or Signup to reply.
  3. 0

    mx-auto on the svg should do the trick

    https://play.tailwindcss.com/o33Y2yn5KP

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search