将按钮对齐到 div 的中心

Posted 2023-03-29

【中文标题】将按钮对齐到 div 的中心

【英文标题】：Align button to center of div

【发布时间】：2021-10-24 05:25:38

【问题描述】：

我正在尝试将按钮放在我的 div 上，我已经创建了一个网站，并且我正在使它具有响应性。我曾尝试将 flex 和 center 与 justify-content 和 align-items 一起使用以使我的按钮居中，但都没有奏效。我尝试了其他方法，将按钮宽度设置为最大，但没有奏效。这是我的 div 的外观：

这是我的html：

<section class="white-bg section" id="contact">
            <div class="main-content intro-content">
                <div class="intro-text">
                    <h2>Cadastre-se para ter acesso a mais configurações!</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        Numquam placeat ducimus doloribus magni vero non quibusdam explicabo,
                    itaque fugit a tempore culpa totam saepe vitae in corrupti. Nisi,
                    non similique.</p>
                </div>
                <div class="intro-img">
                    <img src="/assets/img/intro-img.svg" >
                </div>

                <div class="contact-form">
                    <fieldset class="form-grid">
                        <legend>Contact me</legend>
                        <div class="form-group">
                            <label for="first-name">First Name</label>
                            <input type="text" name="first-name" id="first-name" placeholder="First name">
                        </div>
                        <div class="form-group">
                            <label for="first-name">Last Name</label>
                            <input type="text" name="last-name" id="last-name" placeholder="Last name">
                        </div>
                        <div class="form-group">
                            <label for="first-name">Email</label>
                            <input type="email" name="email" id="email" placeholder="Email">
                        </div>
                        <div class="form-group full-width">
                            <label for="first-name">Message</label>
                            <textarea name="message" id="message" \
                            cols="30" rows="10" placeholder="Message"></textarea>
                        </div>
                        <div class="form-group">
                            <button type="submit">Send message</button>
                        </div>
                    </fieldset>
                </div>
            </div>
        </section>

这是我的 CSS：

.contact-form 
    grid-column: span 2;


.contact-form .form-grid 
    border: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);


.form-group 
    flex: 1 1 320px;


.form-group label 
    display: block;


.form-group input, .form-group textarea 
    border-radius: 10px;
    padding: 5px;
    background: white;
    outline: none;
    width: 100%;
    font-size: 1.4rem;


.full-width 
    width: 100%;
    flex: 1 1 100%;


.form-grid legend 
    text-align: left;
    font-style: italic;
    font-size: 1.4rem
 

.form-group button 
    border: 0.3rem solid black;
    background: none;
    color: black;
    padding: 1rem 1rem;
    font-size: 2rem;
    cursor: pointer;
    transition: all 300ms ease-in-out;


.form-group button:hover
    border: 0.4rem solid #988BC7;
    color: #988BC7;


.form-group input:focus
    border: 3px solid #988BC7;


.form-group textarea:focus
    border: 3px solid #988BC7;


.form-group button 
    justify-content: center;
    align-items: center;


.footer-content p a
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

【参考方案1】：

只需在按钮的父级div 中添加style="text-align:center"：

<div class="form-group" style="text-align: center">
  <button type="submit">Send message</button>
</div>

【参考方案2】：

包含按钮的form-group div 也应该有一个完整的宽度，然后您可以将text-align: center 添加到表单组中，它将位于中心。

【参考方案3】：

我们还可以在按钮的父 div 上添加 flex 和 justify-content 属性，并从不再需要的 CSS 中删除此样式

.form-group 按钮

<div class="form-group" style="display: flex; justify-content: center;">
  <button type="submit">Send message</button>
</div>