个人中心
gpt4 book ai didi

html - 为什么margin :0 auto; not work on this input button?

转载 作者：太空狗 更新时间：2023-10-29 15:21:32 25 4
gpt4 key购买 nike

我正在尝试将输入按钮置于表单的中央，但通常的边距是:0 auto；没有做任何事情。以下是我的 HTML 的设置方式:

<body>
<div class="container">
    <div class="contact-div">
        <form id="contact-form">
            <div class="input-field">
                <input type="button" value="Submit" class="submit-button" />
            </div>
        </form>
    </div>
</div>
</body>

和CSS:

body {
    padding:0;
    margin:0;
    width:100%;
    font-family: Century Gothic,sans-serif;
}

.container {
    width:100%;
}

#contact-div {
    height:100vh;
    width:100%;
    background: url("images/contactpic3.jpg") no-repeat center fixed; 
    background-size: cover;
}

.input-field{
    width:60%;
    margin:0 auto;
}

.submit-button {
    height:40px;
    width:200px;
    margin:auto;
    border:2px black solid;
    border-radius:10px;
    font-size:1.5em;
    text-align:center;

}

这里还有一个有问题的 JSFiddle ( https://jsfiddle.net/wge66p83/ )。从我添加的红色背景颜色可以看出，提交按钮没有居中，只是贴在 input-field 的左边缘。我怎样才能让这个输入在我的 div 中居中？

最佳答案

要使 margin: auto 技巧起作用，该元素必须是一个 block 。因此，将 display: block; 添加到按钮的 css 中就可以了；)

关于html - 为什么margin :0 auto; not work on this input button?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33059927/

25 4 0
文章推荐： c - 从 double 的格式说明符 '%g' 开始以指数格式打印
文章推荐： android 开发者——你需要从设计师那里得到什么？
文章推荐： C - 检查一个变量是否*没有*许多选项的最简洁的方法？
文章推荐： C - 单引号与双引号
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com