How to center an H3 with background-color?

Asked

Viewed 46 times

1

How can I leave this H3 centralized with the background-color?

I tried everything, I looked on the internet but I couldn’t find a solution

    <style>
        h3 {
        background-color:#98FB98;
        margin-top: 10px;
        width: 20%;
        border-radius: 10px;
        border-width: 1px solid #000;
        text-align: center;
        color: gray;
        }       
    </style>

https://i.stack.Imgur.com/0vrmj.png

css html5

1 answer

2


Exchange the margin-top: 10px for margin: 10px auto 1em auto;.

Block elements, when smaller than the width of the viewport, have auto margin on the sides, they center horizontally. The margin with 4 values already define the 4 directions in the order top right bottom left:

        top      bottom
         ↓         ↓
margin: 10px auto 1em auto;
              ↑        ↑
            right    left

The value 1em is the default value of user agent (browser)

Behold:

h3 {
   background-color:#98FB98;
   margin: 10px auto 1em auto;
   width: 20%;
   border-radius: 10px;
   border-width: 1px solid #000;
   text-align: center;
   color: gray;
}
<h3>texto</h3>

  • Show man! now I get it

  • I am beginner & #Xa;I started studying for a while

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.