button 중앙정렬 문의 드립니다. 채택완료
안녕하세요.
구글링으로 아래 코드처럼 버튼 4개를 생성했는데요. float: left; 때문인지 버튼을 중앙으로 옮기려고 해도 초보라서 잘 안됩니다. float: left; 를 삭제하면 위 아래로 4개가 나란히 줄서기를 하고..
어떻게 수정하면 중앙정렬이 될까요? 고수님들의 도움 청해봅니다.
감사합니다.
<style>
a.button {
display: inline-block;
position: relative;
float: left;
width: 100px;
padding: 0;
margin: 10px 20px 10px 0;
font-weight: 600;
text-align: center;
line-height: 50px;
color: #FFF;
border-radius: 5px;
transition: all 0.2s ;
}
.btnBlueGreen {
background: #00AE68;
}
.btnLightBlue {
background: #5DC8CD;
}
.btnOrange {
background: #FFAA40;
}
.btnPurple {
background: #A74982;
}
/* 3D */
.btnBlueGreen.btnPush {
box-shadow: 0px 5px 0px 0px #007144;
}
.btnLightBlue.btnPush {
box-shadow: 0px 5px 0px 0px #1E8185;
}
.btnOrange.btnPush {
box-shadow: 0px 5px 0px 0px #A66615;
}
.btnPurple.btnPush {
box-shadow: 0px 5px 0px 0px #6D184B;
}
.btnPush:hover {
margin-top: 15px;
margin-bottom: 5px;
}
.btnBlueGreen.btnPush:hover {
box-shadow: 0px 0px 0px 0px #007144;
}
.btnLightBlue.btnPush:hover {
box-shadow: 0px 0px 0px 0px #1E8185;
}
.btnOrange.btnPush:hover {
box-shadow: 0px 0px 0px 0px #A66615;
}
.btnPurple.btnPush:hover {
box-shadow: 0px 0px 0px 0px #6D184B;
}
</style>
<a href="" class="button btnPush btnBlueGreen">Push</a>
<a href="" class="button btnPush btnLightBlue">Push</a>
<a href="" class="button btnPush btnOrange">Push</a>
<a href="" class="button btnPush btnPurple">Push</a>
답변 2개
</p>
<p><style></p>
<p>.btnWrap{text-align: center;}</p>
<p>a.button {</p>
<p>display: inline-block;</p>
<p>position: relative;</p>
<p>width: 100px;</p>
<p>padding: 0;</p>
<p>margin: 10px 10px 10px 10px;</p>
<p>font-weight: 600;</p>
<p>text-align: center;</p>
<p>line-height: 50px;</p>
<p>color: #FFF;</p>
<p>border-radius: 5px;</p>
<p>transition: all 0.2s ;</p>
<p>}</p>
<p>.btnBlueGreen {</p>
<p>background: #00AE68;</p>
<p>}</p>
<p>.btnLightBlue {</p>
<p>background: #5DC8CD;</p>
<p>}</p>
<p>.btnOrange {</p>
<p>background: #FFAA40;</p>
<p>}</p>
<p>.btnPurple {</p>
<p>background: #A74982;</p>
<p>}</p>
<p>/* 3D */</p>
<p>.btnBlueGreen.btnPush {</p>
<p>box-shadow: 0px 5px 0px 0px #007144;</p>
<p>}</p>
<p>.btnLightBlue.btnPush {</p>
<p>box-shadow: 0px 5px 0px 0px #1E8185;</p>
<p>}</p>
<p>.btnOrange.btnPush {</p>
<p>box-shadow: 0px 5px 0px 0px #A66615;</p>
<p>}</p>
<p>.btnPurple.btnPush {</p>
<p>box-shadow: 0px 5px 0px 0px #6D184B;</p>
<p>}</p>
<p>.btnPush:hover {</p>
<p>margin-top: 15px;</p>
<p>margin-bottom: 5px;</p>
<p>}</p>
<p>.btnBlueGreen.btnPush:hover {</p>
<p>box-shadow: 0px 0px 0px 0px #007144;</p>
<p>}</p>
<p>.btnLightBlue.btnPush:hover {</p>
<p>box-shadow: 0px 0px 0px 0px #1E8185;</p>
<p>}</p>
<p>.btnOrange.btnPush:hover {</p>
<p>box-shadow: 0px 0px 0px 0px #A66615;</p>
<p>}</p>
<p>.btnPurple.btnPush:hover {</p>
<p>box-shadow: 0px 0px 0px 0px #6D184B;</p>
<p>}</p>
<p></style></p>
<p><div class="btnWrap"></p>
<p><a href="" class="button btnPush btnBlueGreen">Push</a></p>
<p><a href="" class="button btnPush btnLightBlue">Push</a></p>
<p><a href="" class="button btnPush btnOrange">Push</a></p>
<p><a href="" class="button btnPush btnPurple">Push</a></p>
<p></div></p>
<p>
버튼을 div(.btnWrap)로 감싸시고
거기에 {text-align : center;} 를 주신다음에
a.button의 {float:left;}를 삭제하시면 됩니다.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
좋은 정보 너무 감사합니다. 시도해보겠습니다.
고맙습니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
방금 퇴근해서 댓글 보았습니다.. 적용해보았더니 잘 됩니다..너무 감사합니다.
저도 비슷하게는 적용했었는데 inline-block은 생각을 못했었네요...
고맙습니다.