HTML- input 박스 가운데 정렬 어케하나요..?ㅠㅠ

Question

일단 프론트 공부한지 일주일된 완전 초보이구요.. 구글 웹사이트 따라 만들고 있는데 input 박스가 왼쪽으로 치우쳐졌어요ㅜㅜ구글링하면서 이것저것 해봤는데 중앙으로 오질않아여.,,, 몇시간째 끙끙대고 있어서,,, 도와주세여.. HTML -

CSS - (왕초보라 지저분할거예요...ㅎ 버튼 태그의 스타일은 안넣었슴당) .middle{ margin-top: 290px; text-align: center; } .logo-image{ width: 273px; height: auto; margin: 0 65px 23px; } .input-area{ text-align: center; display:block; } .input-box{ box-sizing: border-box; width: 560px; height: 41px; padding: 5px 8px 0px 14px; border-radius: 24px; border: 1px solid #dfe1e5; padding-left: 50px; padding-right: 130px; } .input-box:hover{ background-color: #fff; box-shadow: 0 1px 6px rgba(32,33,36,.28); border-color: rgba(223,225,229,0); } .search-icon{ position: relative; left: 40px; color: #9aa0a6; } .keyboard-icon{ position: relative; right: 110px; color: #9aa0a6; padding-right: 15px; } .mic-icon{ position: relative; right: 110px; color: #9aa0a6; padding-right: 15px; } .camera-icon{ position: relative; right: 110px; color: #9aa0a6; padding-right: 15px; }

yeol · Answer

구글에 'css 가운데 정렬' 라고 쳐보세여

김을동 · Answer

wrapper의 크기를 100프로로 주고margin 0 auto하는 방법position absolute 주고 left calc(50% - {개체크기절반})을 주는 방법전체 wrapper를 align center 주고 인라인블럭 요소로 항목들을 배치하는 방법이 있습니다

state · Answer

input 태그를 자체를 정렬한다는건지 : flex input 안에 영역을 정렬한다는건지 : padding, margin

1년했어요 · Answer

다른 유저분들께서 정확한 질문을 요구하시는게 잘못은 아니지만 막 시작하시는 분께는 너무 각박한게 아닐지.. 다른 분들의 답변과는 무관한 문제여서 해결해보려고 노력하는동안 많이 고통 받으셨을것 같습니다. 혹시 이미 해결하셨을지도 모르지만 답변남겨봅니다. i태그에 position이 걸리면서 i를 감싸고 있던 span태그만 덩그러니 남아서 자리를 차지하고있는 듯합니다. css에 아래와 같이 추가하여 확인하시면 충분히 수정 가능하실거라고 생각합니다ㅎㅎ 즐거운 코딩 하시길 바라겠습니다~ span { background-color: aqua; } i { background-color: pink; } .. 해결은 여러 방법으로 가능하지만 아래와 같이 수정해볼수있을것같아요!

HTML- input 박스 가운데 정렬 어케하나요..?ㅠㅠ

4개의 답변

Q&A 목록