소셜로그인 아이콘 위치 중앙 정렬 어떻게 하나요?

소셜로그인 아이콘 위치 중앙 정렬 어떻게 하나요?

QA

소셜로그인 아이콘 위치 중앙 정렬 어떻게 하나요?

본문

2038202455_1660311824.4328.jpg

네이버 하나만 쓰고 싶어서 네이버만 체크를 했는데요, 그러니 저렇게 왼쪽 정렬로 됩니다.

가운데로 옮기고 싶은데 어떻게 하면 될까요?

social/style.css 봐도 잘 모르겠어요..

 


@charset "utf-8";
.social_info_guide {background:#f3f3f3;border:1px solid #ddd;margin:0 10px 10px;padding:10px 15px;line-height:1.5em}
.bg-warning {margin:0 10px 10px;padding:10px 15px;line-height:1.5em}
.bg-warning1 {background:#f7dfe4;border:1px solid #eac3cb}
.bg-warning2 {background:#deeabf;border:1px solid #bde498}
.bg-warning3 {background:#fff8dc;border:1px solid #f1e4b2}
/* SNS LOGIN */
/*.login-sns {padding-bottom:10px;margin-top:5px;border:1px solid #dde7e9;border-bottom:1px solid #dde7e9;clear:both;background:#fff}
.login-sns h3 {padding-top:10px;text-align:center;color:#777;font-weight:normal}
.sns-wrap {margin:10px 0 0;text-align:center}
.sns-icon {display:inline-block;vertical-align:middle;text-decoration:none}
.sns-icon:hover {text-decoration:none}
.sns-icon .ico {display:block;vertical-align:middle}
/*.sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}*/
.sns-icon .txt i {font-style:normal}
#fregisterform .form_01 .reg-form {margin-bottom:20px}
#fregisterform .form_01 .reg-form .sns-wrap {margin:10px 0 0;text-align:left}
.reg-form .sns-icon {display:inline-block;vertical-align:middle;text-decoration:none;border-width:1px;border-style:solid;overflow:hidden;margin:0 1px}
.reg-form .sns-icon:hover {text-decoration:none}
.reg-form .sns-icon .ico {display:block;background:url('./img/sns_logo.png') no-repeat;vertical-align:middle;width:24px;height:24px}
.reg-form .sns-icon-not .ico {display:block;background:url('./img/sns_logo_not.png') no-repeat;vertical-align:middle}
.reg-form .sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
.reg-form .sns-icon .txt i {font-style:normal}
.sns-wrap-reg .sns-naver {border-color:#18a400;background:#2db400}
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-reg .sns-google {border-color:#ca2c19;background:#dd5443}
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
.sns-wrap-reg .sns-facebook {border-color:#2e5393;background:#3a5897}
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
.sns-wrap-reg .sns-icon {border-color:#dcdcdc}
.sns-wrap-reg .sns-icon-not {border-color:#8b8b8b}
.sns-wrap-reg .sns-naver {border-color:#18a400}
.sns-wrap-reg .sns-naver .ico {background-position:-29px 0; }
.sns-wrap-reg .sns-google .ico {background-position:-58px 0}
.sns-wrap-reg .sns-google {border-color:#ca2c19}
.sns-wrap-reg .sns-facebook .ico {background-position:0 0 }
.sns-wrap-reg .sns-facebook {border-color:#2e5393}
.sns-wrap-reg .sns-kakao .ico {background-position:-87px 0}
.sns-wrap-reg .sns-twitter {border-color:#488FC9}
.sns-wrap-reg .sns-twitter .ico {background-position:-145px 0}
.sns-wrap-reg .sns-payco {border-color:#C44646}
.sns-wrap-reg .sns-payco .ico {background-position:-116px 0}
.sns-wrap-reg .sns-kakao {border-color:#f2df00}
/* SNS by COLOR */
.sns-wrap-over .sns-naver {background:url('./img/sns_naver_s.png') no-repeat}
.sns-wrap-over .sns-google {background:url('./img/sns_gp_s.png') no-repeat}
.sns-wrap-over .sns-facebook {background:url('./img/sns_fb_s.png') no-repeat}
.sns-wrap-over .sns-twitter {background:url('./img/sns_twitter_s.png') no-repeat}
.sns-wrap-over .sns-payco {background:url('./img/sns_payco_s.png') no-repeat}
.sns-wrap-over .sns-kakao {background:url('./img/sns_kakao_s.png') no-repeat}
.reg-form .sns-icon-not {border-color:#8b8b8b}
.social-login-loading {width:100%;height:auto;text-align:center}
.social-login-loading p {display:inline-block;margin-top:10px;padding:40px 0 0;line-height:30px}
/* 버튼 속성 */
.btn_submit {border:0;background:#ffeeee;color:#333;cursor:pointer;border-radius:3px;text-decoration:none;}
.btn_submit:hover {background:#transparent}
a.btn_cancel {display:inline-block;background:#eee;color:#333;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#fff1f1;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#transparent}
/* 아웃로그인 */
#sns_outlogin .sns-icon {overflow:hidden;margin:0 1px}
#sns_outlogin .sns-icon .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
#sns_outlogin .sns-icon .ico {width:30px;height:30px}
/*로그인 */
#sns_login {border:0;margin-top:15px;border-top:1px solid #edeaea;}
#sns_login h3 {padding:10px 0 0;text-align:left;font-weight:bold;}
#sns_login .sns-icon {display:block;height:30px;line-height:30px;width:100%;margin:0 0 5px;padding-left:15px;text-align:left;color:#fff;border-radius:3px}
#sns_login .sns-naver {background-color:#1fc800;border-bottom:1px solid #1ea505}
#sns_login .sns-kakao {background-color:#ffeb00;border-bottom:1px solid #e2c10a}
#sns_login .sns-kakao {color:#3c1e1e}
#sns_login .sns-facebook {background-color:#3b579d;background-position:5px 5px;border-bottom:1px solid #28458f}
#sns_login .sns-google {background-color:#db4a3a;background-position:5px 5px;border-bottom:1px solid #c03121}
#sns_login .sns-twitter {background-color:#1ea1f2;background-position:5px 5px;border-bottom:1px solid #1e82c0}
#sns_login .sns-payco {background-color:#df0b00;background-position:5px 5px;border-bottom:1px solid #9d0800}
#sns_login .txt {text-align:center;padding-left:10px;border-left:1px solid rgba(0,0,0,0.1);display:block;font-weight:bold}
/*#sns_login .txt:hover {background:rgba(0,0,0,0.07)}*/
/*회원가입 */
#sns_register {margin:0 0 10px;padding:0;text-align:center;border-radius:3px}
#sns_register:after {display:block;visibility:hidden;clear:both;content:""}
#sns_register h2 {float:left;display:inline-block;text-align:left;width:50%;height:56px;line-height:56px;padding:0 20px;font-size:1.2em}
#sns_register .sns-wrap {display:inline-block;float:left;width:50%;height:56px;line-height:53px;margin:0;text-align:right;padding:0 20px}
#sns_register .sns-wrap:after {display:block;visibility:hidden;clear:both;content:""}
#sns_register .sns-icon {display:inline-block;height:30px;line-height:30px;width:30px;margin:0 3px;text-align:right;color:#fff;border-radius:2px}
#sns_register .sns-naver {background-color:#1fc800;background-position:0 0}
#sns_register .sns-kakao {background-color:#ffeb00;background-position:0 0}
#sns_register .sns-facebook {background-color:#3b579d;background-position:0 0}
#sns_register .sns-google {background-color:#db4a3a;background-position:0 0}
#sns_register .sns-twitter {background-color:#1ea1f2;background-position:0 0}
#sns_register .sns-payco {background-color:#df0b00;background-position:0 0}
#sns_register .txt {position:absolute;line-height:0;font-size:0;vertical-align:middle;overflow:hidden}
/*기존 계정에 연결하기*/
/* Styles for Accordion */
.mbskin .toggle {position:relative;display:block;border:1px solid #eee;margin-top:-1px;background-color:#fcfcfc;}
.mbskin .toggle .toggle-title {padding:13px 15px;line-height:20px}
.mbskin .toggle .title-name {display:block}
.mbskin .toggle .toggle-inner {padding:15px;line-height:1.5em;display:none;background:#fff;border-top:1px solid #eee}
.mbskin .toggle .toggle-inner div {max-width:100%}
.mbskin .right_i {position:absolute;font-size:0.92em;top:10px;right:10px;padding:0 10px 0 0;border-radius:3px;display:inline-block;z-index:2;background:#eee;color:#fff;border-bottom-color:#1977b5;cursor:pointer}
.mbskin .toggle .toggle-title .right_i i {background:url("./img/plus_minus.png") 0 -24px no-repeat;width:20px;height:24px;display:inline-block;vertical-align:middle}
.mbskin .toggle .toggle-title.active .right_i i {background:url("./img/plus_minus.png") 0 0 no-repeat}
.mbskin .all_agree {position:relative;display:block;margin-bottom:6px;background:#fff;border:1px solid #eeec;border-top:0;padding:13px 15px;line-height:20px}
#register_member .sns_tbl {background:#fff;margin:10px 0;border:1px solid #eeec}
.sns_tbl table {border:0}
.sns_tbl caption {padding:0 20px;line-height:45px;font-size:1em;border-bottom:1px solid #eee;color:#333;background:#fcfcfc}
.sns_tbl th {width:100px;text-align:right;padding:10px}
.sns_tbl td {padding:10px}
.sns_tbl .email_msg {color:#777;margin:5px 0 0}
#fregisterform .btn_confirm {text-align:center;margin:20px 0}
#fregisterform .btn_confirm .btn_submit {height:45px;padding:0 30px;font-weight:bold;font-size:1em}
#fregisterform .btn_confirm .btn_cancel {line-height:45px;height:45px;padding:0 30px;font-weight:bold;font-size:1em}
#sns-link-pnl .connect-close {position:absolute;top:10px;right:10px;margin:0;padding:0;width:30px;height:30px;border:0;background:transparent;color:#383838;cursor:pointer;font-size:15px}
#sns-link-pnl .connect-close:hover {color:#fff1f1}
#sns-link-pnl .connect-close .fa {margin:0 0 0 1px}
#sns-link-pnl .connect-close .txt {position:absolute;line-height:0;font-size:0;overflow:hidden}
#sns-link-pnl #login_fs {margin:0 auto;width:100%;text-align:left}
#sns-link-pnl #login_fs label {display:block;display:block;font-size:1em;color:#7a7a7a;margin:5px 0}
#sns-link-pnl #login_fs .lg_id,#sns-link-pnl #login_fs .lg_pw {width:100%;margin-bottom:5px}
#sns-link-pnl #login_id,#sns-link-pnl #login_pw {width:100%}
#sns-link-pnl #login_fs .login_submit {width:100%;height:44px;font-size:1em;margin:10px auto 0;font-weight:bold;cursor:pointer;display:block}
#sns-link-pnl .connect-fg {height:320px;text-align:left}
#sns-link-pnl .login_fs {margin:0 auto;width:260px}
#sns-link-pnl .connect-fg .connect-desc {margin:0 0 10px;padding:15px;border:1px solid #d6e9c6;background:#dff0d8;color:#3c763d}
#sns-link-pnl .connect-fg .connect-title {margin-top:25px;margin-bottom:10px;font-size:1em;font-weight:bold;text-align:center}
.mbskin .member_connect:after {display:block;visibility:hidden;clear:both;content:""}
.mbskin .member_connect {margin-top:80px;background:#fff7f7;border-radius:3px;padding:10px;text-align:left}
.mbskin .member_connect .strong {font-size:1em;font-weight:bold;margin:0 0 10px}
.mbskin .member_connect button {color:#333;border:0;padding:6px 20px 7px;border:1px solid #ffeeee;font-weight:bold;background:#ffeeee;border-radius:3px;font-size:0.91em}
.mbskin .member_connect button:hover {background:#ffcccc}
html.remodal-is-locked {overflow-y:scroll !important}
@media only screen and (min-width:641px) {
    #sns-link-pnl.remodal {max-width:400px;padding:50px}
}

이 질문에 댓글 쓰기 :

답변 1

아이콘이 아니라 버튼을 중앙으로 옮기고 싶다는거군요

일단 세가지 방법이 있습니다.

첫번쨰는 width:550px << 사이즈 조절하고 margin:0 auto;

두번쨰는 최상위에 div를 줘서 text-align:center 를 넣으면 되요~ 이게 버튼으로 적용하기 딱 좋구요

세번째는 최상위에 div를 주고 display:flex; justify-content:center;

이렇게 있는데 3가지 예시를 주는이유가 안먹힐떄가 간혹 있더라구요 그래서 세가지 방법으로 응용해서 하시면 될것같아요

자! 그러면 개발자도구 f12로 해서 켜서 저부분을 찍어서 div나 버튼을 클릭하면 오른쪽에 css가 자세히 나와요 제가 위에 말한거 대로 하나씩해서 넣어보고 안맞음 빼보고 이럼될거에요 마지막으로 사용법은 유툽에서 찾아보면 바로 익힐수있습니다. 그럼^^

답변을 작성하시기 전에 로그인 해주세요.
전체 112,845 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIR SOFT