0
私はコードを学ぶように模擬ウェブサイトを作っています。私はCSSで「自分の仕事を見る」ボタンをどのようにセンタリングするのか分かりません。私はスタックオーバーフローでこれを持っていた他の問題を見てきましたが、divでラップしようとしましたが、input [type = "button"]を使ってみましたが、まだどこにでもいませんでした。ボタンをちょっと右に押すと停止して、中央でそれをすべて取得することはできません。CSSのセンタリングボタン
問題は最大画面幅（@media画面と（最小幅：992ピクセル））です。
私が持っているもう1つの問題は、背景画像に不透明度を持たせたいが、その上にボタンの見出しとテキストを入れないことです。私はテキストの不透明度を止める方法を知らない。みんなありがとう！
ここで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や他のライブエディタへのリンクを提供することもできます）、より簡単に役立ちます。 – metahamza