메뉴 가운데 정렬
본문
위 사진처럼 가로메뉴가 왼쪽으로 정렬이 되어 있습니다
이걸 가운데 정렬을 시키려면 어찌 해야 하는지. ㅠㅠㅠ
이것저것 해봐도 잘 안되네요.
아래 코드그 위 메뉴 .css 코드입니다.
#header_wrap {
top: 0px; width: 100%; overflow: hidden; border-bottom-color: rgb(0, 69, 162); border-bottom-width: 1px; border-bottom-style: solid; position: absolute; z-index: 30; box-sizing: border-box; background-color: rgb(255, 255, 255);
}
#header_wrap .header_gnb_wrap > .inner {
position: relative;
}
#header_wrap::before {
left: 50%; top: 0px; width: 50%; height: 100%; display: inline-block; position: absolute; content: ""; background-color: rgb(255, 255, 255);
}
#header_wrap::after {
left: 50%; top: 0px; width: 50%; height: 100%; display: inline-block; position: absolute; content: ""; background-color: rgb(255, 255, 255);
}
#header_wrap > .inner {
position: relative;
}
.header_gnb_wrap {
height: 54px; position: relative; z-index: 1; background-color: rgb(0, 69, 162);
}
#gnb {
margin-left:0px auto; width: 100%; height: 54px; text-align: center; /* 메인메뉴 여백 등 사이 */
}
#gnb .gnb_wrap .d_1_wrap .d_1 {
overflow: hidden;
}
#gnb .gnb_wrap .d_1_wrap .d_1 > li {
width: 268px; float: left; box-sizing: border-box; /* 메인 간격 */
}
#gnb .gnb_wrap .d_1_wrap .d_1 > li:first-child .d_btn_1 a {
border-left-color: rgb(67, 115, 180); border-left-width: 1px; border-left-style: solid;
}
#gnb .gnb_wrap .d_1_wrap .d_1 > li .d_btn_1 a {
padding: 18px 0px; width: 100%; text-align: center; letter-spacing: -0.5pt; border-right-color: rgb(67, 115, 180); border-right-width: 1px; border-right-style: solid; display: block;
}
#gnb .gnb_wrap .d_1_wrap .d_1 > li .d_btn_1 a em {
color: rgb(231, 241, 255); line-height: 18px; letter-spacing: -0.5pt; font-family: "NotoKR-Medium", sans-serif; font-size: 18px; font-weight: 400; display: block ;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 {
padding: 20px 0px 50px; top: 54px; display: none; position: absolute;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2::after {
left: 0px; top: 0px; width: 1px; height: 100%; display: block; position: absolute; content: ""; background-color: rgb(225, 225, 225);
}
#gnb .gnb_wrap .d_1_wrap .d_1 > li:first-child .d_2::after {
content: none;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li {
width: 168px;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li > a {
padding: 6px 0px 6px 15px; display: block; position: relative;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li > a em {
color: rgb(102, 102, 102); line-height: 130%; letter-spacing: -0.5pt; font-size: 14px; display: inline-block;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li.bl > a em::before {
width: 6px; height: 1px; display: inline-block; position: absolute; content: ""; background-color: rgb(119, 119, 119);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li.bl > a em::after {
width: 6px; height: 1px; display: inline-block; position: absolute; content: ""; background-color: rgb(119, 119, 119);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li > a.active {
background-color: rgb(31, 75, 180);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li > a.active em {
color: rgb(255, 255, 255);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li > a.active em::before {
background-color: rgb(255, 255, 255);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li > a.active em::after {
background-color: rgb(255, 255, 255);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li.bl > a em::before {
top: 18px; right: 10px; transform: rotate(-45deg);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 > ul > li.bl > a em::after {
top: 14px; right: 10px; transform: rotate(45deg);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 {
left: 168px; top: 0px; width: 168px; display: none; position: absolute; z-index: 9950; background-color: rgb(31, 75, 180);
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 ul {
left: 0px; top: 30px; position: absolute;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 ul li {
width: 158px;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 ul li:first-child {
margin-top: 0px;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 ul li a {
padding: 6px 0px 6px 15px; width: 100%; display: block; box-sizing: border-box;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 ul li a em {
color: rgb(255, 255, 255); letter-spacing: -0.5px; display: block;
}
#gnb .gnb_wrap .d_1_wrap .d_1 > li:first-child .d_2 .d_3 {
display: block;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 ul li a:hover em {
color: rgb(255, 255, 255); text-decoration: underline !important;
}
#gnb .gnb_wrap .d_1_wrap .d_1 .d_2 .d_3 ul li a:hover em::after {
display: block;
}
답변 2
원리만 말씀드리자면,
ul 요소에 width 값 (100% 주면 안 됨) 주고, margin:0 auto 주시면 되세요.
css 만 봐서는 어디를 조정 해야 하는지 알수 없습니다 링크를 알려주시거나 html 코드도 함께 적어 주셔야 할 것 같습니다.
답변을 작성하시기 전에 로그인 해주세요.
