Horizontal rule is not centering in div


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

What have I done wrong? Thanks


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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HR Stílus</title>
        .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 */

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

1 Like

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

I was happy to help. You’re very welcome

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