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
<style>
.btnWrap{text-align: center;}
a.button {
display: inline-block;
position: relative;
width: 100px;
padding: 0;
margin: 10px 10px 10px 10px;
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>
<div class="btnWrap">
<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>
</div>
버튼을 div(.btnWrap)로 감싸시고
거기에 {text-align : center;} 를 주신다음에
a.button의 {float:left;}를 삭제하시면 됩니다.
안녕하세요.
방금 퇴근해서 댓글 보았습니다.. 적용해보았더니 잘 됩니다..너무 감사합니다.
저도 비슷하게는 적용했었는데 inline-block은 생각을 못했었네요...
고맙습니다.
안녕하세요.
좋은 정보 너무 감사합니다. 시도해보겠습니다.
고맙습니다.
