How to align text in center

Question

I want global navigation bar to align center. #nav in .gnb class. parent element #nav width is 1173px. So I set up width left and right element each 107px, 163px. naturally .gnb class get the rest value that is 903px. but .gnb class does not working. why does this happen?

 /* no reset.css */ header{ width: 100%; height: 46px; border-bottom: 1px solid #e1e1e1; background: #f8f8f8; } #header{ position: relative; width: 1173px; margin: 0 auto; } #header.left li a{ display: inline-block; height: 46px; font-size: 13px; color:#555; } #header.left li{ float: left; position: relative; padding: 0 20px; line-height: 46px; } /* 첫 번째 자식 구분선 해제 */ #header.left li:first-child{ padding-left: 0; } #header.left li:first-child:after{ display: none; } /* 로고 구분선 */ #header.left li:after{ content: ""; display: inline-block; position: absolute; left: 0; top: 14px; width: 1px; height: 20px; background: #e1e1e1; } /* 왼쪽 로고 이미지 */ #header.left li:first-child a{ padding: 0 0 0 28px; background: url('https://adventure.lotteworld.com/common/images/icon/header_sky_icon.png') no-repeat 0 50%; } #header.left li:nth-child(2) a{ padding: 0 0 0 35px; background: url('https://adventure.lotteworld.com/common/images/icon/header_aqua_icon.png') no-repeat 0 50%; } #header.left li:last-child a{ padding: 0 0 0 33px; background: url('https://adventure.lotteworld.com/common/images/icon/header_water_icon.png') no-repeat 0 50%; } /* 오른쪽 */.family, .members, .lang{ display: inline-block; } #header.right{ float: right; } #header.right li, a{ float: left; position: relative; line-height: 46px; } #header.family > a:last-child{ padding-right: 30px; } #header.family a:hover{ color: #590fe4; } #header.members a:hover{ color: #000; } #header.members a, #header.lang a{ font-weight: bold; } #header.family a, #header.members a{ padding: 0 11px; } #header.family a, #header.members a, #header.lang a{ font-size: 13px; color: #555; } #header.family li:first-child:after, #header.members li:first-child:after{ display: none; } #header.family li:after, #header.members li:after{ content: ""; display: inline-block; position: absolute; left: 0; top: 14px; width: 1px; height: 20px; background: #e1e1e1; } #header.lang a{ padding-right: 16px; height: 46px; background: url('img/lang_arrow.png') no-repeat right center; } /* 네비게이션 */ nav{ width: 100%; height: 99px; border-bottom: 1px solid #e1e1e1; } #nav{ width: 1173px; height: 99px; margin: 0 auto; } #nav h1{ width: 107px; float: left; height: 99px; background: url('img/logo.png') no-repeat center center; } #nav h1 > a{ color: transparent } #nav.gnb{ width: 903px; text-align: center; } #nav.info{ width: 163px; float: right; }

 <,DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>롯데월드 어드벤처</title> <link rel="icon" href="img/logo.png"> <link rel="stylesheet" href="index.css"> <link rel="stylesheet" href="default.css"> </head> <body> <header> <div id="header"> <ul class="left"> <li><a href="#">SEOUL SKY</a></li> <li><a href="#">롯데월드 아쿠아리움</a></li> <li><a href="#">김해롯데워터파크</a></li> </ul> <ul class="right"> <div class="family"> <li><a href="#">민속박물관</a></li> <li><a href="#">아이스링크</a></li> </div> <div class="members"> <ul> <li><a href="#">Login</a></li> <li><a href="#">회원가입</a></li> </ul> </div> <div class="lang"> <a href="#">KOR</a> </div> </ul> </div> </header> <nav> <div id="nav"> <h1><a href="#">롯데월드 어드벤처</a></h1> <ul class="gnb"> <li><a href="#">즐길거리</a></li> <li><a href="#">요금/우대혜택</a></li> <li><a href="#">참여프로그램</a></li> <li><a href="#">이용가이드</a></li> <li><a href="#">소통서비스</a></li> </ul> <ul class="info"> <li><a href="#">검색</a></li> <li><a href="#">예매</a></li> <li><a href="#">단체</a></li> </ul> </div> </nav> </body> </html>

Answer 1

I don't understand what you want to by the word "not working" But found typo on stylesheet:

#header .right li,
a{

comma is not need for that line. If you are looking for another problem, explain it more:)

How to align text in center

Question

1 answers

solution1
1 2020-09-01 02:30:22

How to align text in center

Question

1 answers

solution1 1 2020-09-01 02:30:22

solution1
1 2020-09-01 02:30:22