button이 중간정렬로 되지 않아 ㅂㄷㅂㄷ...떨고 있던 나 (또르륵)
일단 html의 태그들의 type은 3가지가 있다.
inlin, block, inline-block
기본적으로 block은 우리가 보는 화면은 한 줄을 차지하고 표시하고자 하는 것을 나타내고
inline은 한 줄을 다 차지하고 나타내지 않고, 다른 것들과 속해서 나타나게 된다.
block의 예시로는 P 태그를 바로 생각해보면 될 것 같고, h 태그들도 모두 한 줄씩을 차지하고 있다.
그에 비해 image 태그 혹은 button 태그는 inline 태그으므로, 아무리 내가 margin auto를 주어도
해당 줄을 다 차지하고 있지 않아서, 중앙정렬이 되지 않는다.
- block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>
- inline 요소
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>
이럴 때 해결할 수 있는 방법은 inline이 기본인 button을
block으로 바꾸어주는 것 => display: block으로 해주는 것이다.
그리하여 내가 수정한 방법은 요것이다!
.find-btn{
text-align: center;
}
.find-btn1{
display :inline-block;
}여러분도 화이팅 !