css中的中心按钮

时间：2017-08-23 17:08:48

标签： html css button

我正在制作一个模拟网站，因为我学习编码，而我无法弄清楚如何集中我的工作＆＃34;查看我的工作＆＃34; CSS中的按钮。我已经看过人们在Stack Overflow上遇到的其他问题，我已经尝试将它包装在div中，我尝试使用输入[type =＆＃34; button＆＃34;]但仍然没有到达任何地方。第二种选择允许我将按钮向右移动一点但然后停止，我无法在中心一路抓住它。

问题出在最大屏幕宽度（@media屏幕和（最小宽度：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;
}

}

1 个答案:

答案 0 :(得分：0)

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

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

并且不要忘记将其父宽度设置为100％;

希望它有助于

相关问题
最新问题