Блог

Я создал выпадающее меню и установил position: absolute; , чтобы моя карточка входа перемещалась слева от заголовка, вместо этого я хочу, чтобы она находилась в середине заголовка. есть ли какой-нибудь способ, которым я могу это сделать?

Спасибо и извините за мой плохой английский

HTML:

             <li>
                <div class="drop">
                    <span><i class="fas fa-caret-down"></i> Thành Viên</span>
                    <div class="drop_menu">
                        <div id="login_title">
                            <h2>LOGIN</h2>
                            <div class="under_login"></div>
                        </div>
                        <div class="dropdown_login ">
                            <form method="post" class="form">
                                <label for="user-email" style="padding-top:13px">
                                    amp;nbsp;Email
                                  </label>
                                <input id="user-email" class="form-content" type="email" name="email" autocomplete="on" required />
                                <div class="form-border"></div>
                                <label for="user-password" style="padding-top:22px">amp;nbsp;Password
                                  </label>
                                <input id="user-password" class="form-content" type="password" name="password" required />
                                <div class="form-border"></div>
                                <a href="#">
                                    <legend id="forgot-pass">Forgot password?</legend>
                                </a>
                                <input id="submit-btn" type="submit" name="submit" value="LOGIN" />
                                <a href="#" id="signup">Don't have account yet?</a>
                            </form>
                        </div>
                    </div>
                </div>
            </li>
 

CSS:

 .nav_bar {
    width: 100%;
    height: 80px;
    background: url(../pic/bg_menu.png);
    border: 0.5px solid rgb(179, 41, 41);
    box-shadow: 0 4px 2px -2px rgb(99, 99, 99);
    text-align: center;
}

.nav_bar div.menu_br {
    position: absolute;
    margin-left: 50px;
    text-align: center;
    float: left;
}

.menu_br img {
    margin-top: 2.5px;
    max-width: 78%;
}

.nav_bar ul {
    margin-top: 20px;
    position: relative;
}

.nav_bar ul li {
    list-style-type: none;
    padding-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 25px;
    font-family: 'Nunito', sans-serif;
    color: white;
    display: inline-block;
}

.nav_bar ul li:hover {
    text-decoration: underline;
}

#need_br {
    border-right: 0.5px solid rgb(102, 102, 102);
}

.drop_menu {
    position: absolute;
    display: none;
    background: #fbfbfb;
    border-radius: 8px;
    box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
    margin-right: 300px;
    height: 410px;
    width: 329px;
    z-index: 1;
}

.dropdown_menu_show {
    display: block;
}

.dropdown_login {
    color: black;
    padding: 12px 44px;
}

#login_title {
    font-family: "Raleway Thin", sans-serif;
    color: #000;
    letter-spacing: 4px;
    padding-bottom: 23px;
    padding-top: 23px;
    text-align: center;
}

.under_login {
    background: -webkit-linear-gradient(right, #f77b7b, #c0382e);
    height: 2px;
    width: 89px;
    margin: auto;
}

#signup {
    color: #bd2d2d;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 16px;
    text-align: center;
}

label {
    font-family: "Raleway", sans-serif;
    font-size: 11pt;
}

#forgot-pass {
    color: #bd2d2d;
    font-family: "Raleway", sans-serif;
    font-size: 10pt;
    margin-top: 3px;
    text-align: right;
}

#submit-btn {
    background: -webkit-linear-gradient(right, #f77b7b, #bd2d2d);
    border: none;
    border-radius: 21px;
    box-shadow: 0px 1px 8px #c62424;
    cursor: pointer;
    color: white;
    font-family: "Raleway SemiBold", sans-serif;
    height: 42.3px;
    margin: 0 auto;
    margin-top: 50px;
    transition: 0.25s;
    width: 153px;
}

#submit-btn:hover {
    box-shadow: 0px 1px 18px #c62424;
}

.form {
    align-items: left;
    display: flex;
    flex-direction: column;
}

.form-border {
    background: -webkit-linear-gradient(right, #f77b7b, #c02e2e);
    height: 1px;
    width: 100%;
}

.form-content {
    background: #fbfbfb;
    border: none;
    outline: none;
    padding-top: 14px;
}
 

Выпадающий список должен быть position: relative; , а затем вы можете переместить его влево, используя right: 500px; или любую сумму, которую вы хотите.

  drop_menu {
        position: absolute;
        display: none;
        background: #fbfbfb;
        border-radius: 8px;
        box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.65);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 410px;
        width: 329px;
        z-index: 1;
    }
 

используйте этот css для выпадающего списка