Horizontal rule is not centering in div

Bootstrap Studio Help
1

hi

I’m using bootstrap studio version 6.5.1 and i’m trying to centre a horizontal rule in a div but is not working. Here are the following screen captures for your reference. Thanks

BS-Capture1
BS-Capture1788×79 13.8 KB

BS-Capture2
BS-Capture21145×116 3.06 KB

What have I done wrong? Thanks

2

hi

Ha egy HTML elemhez szeretnéd hozzáadni a HR elemet (vízszintes vonal), és azt 155px szélességre szeretnéd állítani, illetve vizszintesen középre helyezni, akkor a következő CSS stílust alkalmazhatod:

htmlCopy code

<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HR Stílus</title>
    <style>
        .hr-container {
            text-align: center;
        }

        .custom-hr {
            width: 155px;
            height: 1px; /* Vízszintes vonal vastagsága */
            background-color: #000; /* Vízszintes vonal színe */
            margin: 10px auto; /* Margók beállítása a vízszintes középre helyezéshez */
        }
    </style>
</head>
<body>

    <div class="hr-container">
        <hr class="custom-hr">
    </div>

</body>
1 Like
3

Thank you so much :grinning::grinning::grinning:

4

I was happy to help. You’re very welcome

5

You can simply use the following css:

.smallHR {
  width: 5rem;
  margin: 1rem auto;
  border-top: 3px solid orange;
  opacity: 1;
}

and then add the class smallHR, rather than wrapping in a container

3 Likes