css中的居中按钮答案

【问题标题】：Centering button in csscss中的居中按钮
【发布时间】：2017-08-24 01:23:49
【问题描述】：

当我学习编码时，我正在制作一个模拟网站，但我无法弄清楚如何在 CSS 中将“查看我的工作”按钮居中。我已经查看了人们在 Stack Overflow 上遇到的其他问题，我尝试将它包装在一个 div 中，我尝试使用 input[type="button"] 但仍然没有得到任何地方。第二个选项允许我移动按钮稍微向右一点，然后停止，我无法将它一直放在中间。

问题在于最大屏幕宽度（@media screen and (min-width: 992px)）。

我遇到的第二个问题是我希望我的背景图片具有不透明度，而不是顶部的按钮中的标题和文本。我不知道如何阻止文本中的不透明度。谢谢大家！

这里是 HTML：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css.css">
    <title> Sankyeat Kumar | Web Developer </title>
</head>

<body>
    <div id="menu">
        <div><a href="index.html">Home</a></div>
        <div><a href="portfolio.html">Portfolio</a></div>
        <div><a href="blog.html">Blog</a></div>
        <div><a href="contact.html">Contact</a></div>
    </div>

    <div id="banner">
        <div id="heading">
            <h1> Sankyeat Kumar</h1>
            <h4>London Based Web Developer For Hire</h4>
        </div>  

        <div id="button">
            <input type="button" value="View My Work" class="portfolio">
        </div>

    </div>




    <div id="section-a">
        <h2> Services </h2>

        <div id="services">
            <div class="sections">
                <h3>Web Design</h3>
                <p class="section-para">Freelance-Creator offers an exceptional variety of web design services to suit everybody, whether you're self employed or a small business, I can come up with a quality website to suit your needs. </p>
            </div>
            <div class="sections">
                <h3>Responsive Web Sites </h3>
                <p class="section-para">With everybody on the go with mobile & tablet devices it is important to make sure your website is accesible on the go. Responsive websites are also a cheaper alternative to a phone app! </p>
            </div>
            <div class="sections">
                <h3>SEO & Marketing </h3>
                <p class="section-para">SEO (Search Engine Optimisation) is important when it comes to creating an online presence for your website. We offer simple, cost effective and proven marketing results to all of our clients. </p>
            </div>
            <div class="sections">
                <h3>CMS Solutions</h3>
                <p class="section-para">Take full control of your website, whether it be a simple text modification, to an image upload or to adding 100's of products, we will find the right CMS solution for you, that is simple and user friendly. </p>
            </div>
        </div>

    </div>

    <div class="container">
        <h2>Contact me</h2>
        <form action="/action_page.php">

            <label for="fname">First Name</label>
            <input type="text" id="fname" name="firstname" placeholder="Your name..">

            <label for="lname">Last Name</label>
            <input type="text" id="lname" name="lastname" placeholder="Your last name..">

            <label for="country">Country</label>
            <select id="country" name="country">
                <option value="australia">Australia</option>
                <option value="canada">Canada</option>
                <option value="usa">USA</option>
            </select>

            <label for="subject">Subject</label>
            <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

            <input type="submit" value="Submit">

        </form>
    </div>

    </div>  

</body>

这是 CSS：

body {
margin:0px;
padding:0px;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@media screen and (min-width: 320px) {
#menu {
    display:flex;
    background-color: black;
    max-height:50px;
    max-width:100%;
}

#menu div {
    margin: 0 auto;
    color: ##678F99;
    padding:10px;
}

#menu div a {
    color:white;    
    text-decoration: none;
    font-size: 1.5em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#menu div a:hover {
    text-decoration: underline;
}

#banner {
    height:100vh;
    width:100%;

}

#heading {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

#banner #heading h1 {
    color:black;
    font-size: 4em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-align: center;
    z-index: 1;
}

#banner #heading h4 {
    color:black;
    z-index: 1;
    padding: 0 40px;
    text-align: center;
    font-size: 2em;
}

.portfolio {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    padding:10px;
    background-color: black;
    color: white;
    border-radius: 4px;
    position: relative;
    left: 143px;
}

#heading h4 {
    color: white;
    font-size: 3em;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    bottom:50px;
}

#section-a > h2 {
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#section-a {
    background-color: #5F5F5F;
}

#section-a h2 {
    color:white;
}

#services {
    display:flex;
    flex-wrap: wrap;
    color: white;
}

.sections {
    padding: 0 20px;
}

.sections h3 {
    text-align: center;
}

.section-para {
    text-align: justify;
}

input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

    /* Style the submit button with a specific background color etc */
    input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

}

only screen and (min-width: 768px) {

}

@media screen and (min-width: 992px) {

#menu {
    display:flex;
    background-color: black;
    max-height:50px;
    max-width:100%;
}

#menu div {
    margin: 0 auto;
    color: ##678F99;
    padding:10px;
}

#menu div a {
    color:white;    
    text-decoration: none;
    font-size: 1.5em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#menu div a:hover {
    text-decoration: underline;
}

#banner {
    height:100vh;
    width:100%;
    background-image: url('images/london.jpg');
    opacity: 0.5;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    z-index: 0;

}

#heading {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

#banner #heading h1 {
    color:black;
    font-size: 5em;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    z-index: 1;
}

#banner #heading h4 {
    color:black;
    z-index: 1;
    padding: 0 40px;
    text-align: center;
}

.portfolio {
    font-family: "Comic Sans MS", cursive, sans-serif;
    font-size: 30px;
    padding:10px;
    background-color: black;
    color: white;
    border-radius: 4px;
    display: flex;
    justify-content: center;

}

input[type="button"] {
    position:relative;
    right:350px;
}

#heading h4 {
    color: white;
    font-size: 3em;
    font-weight: normal;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    bottom:50px;
}

#section-a {
    margin-top: -33px;
    margin-bottom: 30px;
}

#section-a > h2 {
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
}

#services {
    display:flex;
    flex-wrap: nowrap;
    margin-bottom: 80px;
}

.sections {
    padding: 0 20px;
    margin-bottom: 150px;
}

.sections h3 {
    text-align: center;
}

.section-para {
    text-align: justify;
}

.container {
    margin-top: -80px;
}

input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in 
place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea 
(not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

}

【问题讨论】：

你能解决这个问题吗？我们不需要您的所有代码。如果您可以找出给您带来麻烦的确切 HTML/css 配对（更好的是，提供指向 codepen.io 或其他实时编辑器的链接），它将更容易为您提供帮助。

标签： html css button

【解决方案1】：

您应该尝试为按钮设置以下属性

display:inline-block;
position:static
margin-auto;

并且不要忘记将它的父宽度设置为 100%；

希望对您有所帮助

【讨论】：

很高兴我能帮助你:D :D。不应该把它标记为加急答案，以便有相同问题的其他用户可以轻松找到它吗？