h1 요소와 입력 요소를 수직으로 가운데에 맞추는 데 문제가 있습니다.

목표 : 사용자가 정보를 입력하는 부분 프로젝트에서 입력을 설정하려고합니다. 현재 나는 가장 왼쪽 버블의 입력 레이블 뒤에 두 개의 텍스트 입력 버블이 뒤따라야합니다.h1 요소와 입력 요소를 수직으로 가운데에 맞추는 데 문제가 있습니다.

문제점 : 입력란에 약 5 픽셀 크기의 거품이 표시되어있어이를 교정하는 방법을 찾을 수 없습니다.

Notes : 나는 HTML/CSS에 상당히 익숙하며 완전히 독학을하고 있기 때문에 내가하려고하는 것을 할 수있는 더 좋은 방법이 있다면 나에게 알려 달라. 벨로 나에게 5px 문제를 해결하기 위해 문제

.inputConatiner { 
 
    height: 75px; 
 
} 
 

 
.textContainer { 
 
    height: 75px; 
 
    width: 500px; 
 
    display: inline-block; 
 
} 
 

 
input[type="text"] { 
 
    border: 0px solid; 
 
    border-radius: 20px; 
 
    background-color: rgb(230, 230, 230); 
 
    padding-top: 13px; 
 
    padding-left: 10px; 
 
    padding-bottom: 13px; 
 
} 
 

 
.label { 
 
    width: 270px; 
 
    height: 40px; 
 
    font-family: "Nunito Sans"; 
 
    font-size: 30px; 
 
    display: inline-block; 
 
    background-color: rgb(104, 255, 144); 
 
    border-radius: 20px; 
 
    text-align: center; 
 
} 
 

 
input { 
 
    width: 200px; 
 
}

<head> 
 
    <title>Side Project</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <form method="post" action="#" name="getStudentInfo"> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">Enter Your Name</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="First" required /> 
 
     <input type="text" placeholder="Last" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">1A Class</h1> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
    </div> 
 
    </form> 
 
</body>

출처

2017-12-26 Roxlvox

이 문서를 참조하십시오. 나는 이것이 당신이 찾고있는 것이라고 생각하고 label에 vertical-align: middle;을 사용하여 간단하게 고쳐졌습니다. 그러나 이것을 위해 무엇을 사용하고 있는지 확신 할 수는 없지만 아마도 https://getbootstrap.com/과 같은 프레임 워크를 사용하는 것이 좋습니다. 대부분의 프레임 워크는 모든 화면 크기와 장치에서 훌륭한 기반 블록을 갖게됩니다 (아래 스 니펫에서와 같이 전체 화면으로보아야합니다. 그렇지 않으면 엉망입니다). 현재 UI 포커스에서이 구현은 매우 제한적입니다. 응답하는.이 도움이

희망. 나는 당신의 HTML 코드에서 발견

.inputConatiner { 
 
    height: 75px; 
 
} 
 

 
.textContainer { 
 
    height: 75px; 
 
    width: 500px; 
 
    display: inline-block; 
 
} 
 

 
input[type="text"] { 
 
    border: 0px solid; 
 
    border-radius: 20px; 
 
    background-color: rgb(230, 230, 230); 
 
    padding-top: 13px; 
 
    padding-left: 10px; 
 
    padding-bottom: 13px; 
 
} 
 

 
.label { 
 
    width: 270px; 
 
    height: 40px; 
 
    font-family: "Nunito Sans"; 
 
    font-size: 30px; 
 
    display: inline-block; 
 
    background-color: rgb(104, 255, 144); 
 
    border-radius: 20px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
input { 
 
    width: 200px; 
 
}

<head> 
 
    <title>Side Project</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <form method="post" action="#" name="getStudentInfo"> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">Enter Your Name</h1> 
 
     <div class="textContainer"> 
 
     <input type="text" placeholder="First" required /> 
 
     <input type="text" placeholder="Last" required /> 
 
     </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
     <h1 class="label">1A Class</h1> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
    </div> 
 
    </form> 
 
</body>

출처

2017-12-26 05:55:22 Darren

.textContainer에 대한 사용 display: flex;을 제공하는 섹션입니다.

것은 내가 아래에 조각을 업데이트 한 FlexBox

출처

2017-12-26 05:41:04

것은 당신의 당신이 걸 말한 이후 .inputContainer가. .textContainer 누락 초 HTML과 CSS에 상당히 새로운 것, 나는 당신이 기본적인 pr을 사용하도록 제안한다. 요소를 나란히 배열하기 위해 float과 같은 간격과 간격/정렬을 위해 margin을 사용합니다.

.inputConatiner { 
 
    height: auto; 
 
} 
 

 
/* Without this, the layout would be ruined because of float */ 
 
.inputConatiner:before, .inputConatiner:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 
.inputConatiner:after { 
 
    clear: both; 
 
} 
 

 
.textContainer { 
 
    height: auto; 
 
    width: 500px; 
 
    margin-top: 20px; 
 
    margin-left: 10px; 
 
    float: left; /* This makes the elements stacked side by side */ 
 
} 
 

 
input[type="text"] { 
 
    border: 0px solid; 
 
    border-radius: 20px; 
 
    background-color: rgb(230, 230, 230); 
 
    padding-top: 13px; 
 
    padding-left: 10px; 
 
    padding-bottom: 13px; 
 
} 
 

 
.label { 
 
    width: 270px; 
 
    height: 40px; 
 
    font-family: "Nunito Sans"; 
 
    font-size: 30px; 
 
    float: left; /* This makes the elements stacked side by side */ 
 
    background-color: rgb(104, 255, 144); 
 
    border-radius: 20px; 
 
    text-align: center; 
 
} 
 

 
input { 
 
    width: 200px; 
 
}

<form method="post" action="#" name="getStudentInfo"> 
 
    <div class="inputConatiner"> 
 
    <h1 class="label">Enter Your Name</h1> 
 
    <div class="textContainer"> 
 
     <input type="text" placeholder="First" required /> 
 
     <input type="text" placeholder="Last" required /> 
 
    </div> 
 
    </div> 
 
    <div class="inputConatiner"> 
 
    <h1 class="label">1A Class</h1> 
 
    <div class="textContainer"> 
 
     <input type="text" placeholder="Class" required /> 
 
     <input type="text" placeholder="Teacher" required /> 
 
    </div> 
 
    </div> 
 
</form>

출처

2017-12-26 06:08:05 juntarnate16

h1 요소와 입력 요소를 수직으로 가운데에 맞추는 데 문제가 있습니다.

답변

관련 문제