如何居中对齐文本

Question

I want global navigation bar to align center.我希望全局导航栏居中对齐。 #nav in .gnb class. parent element #nav width is 1173px. #nav in .gnb class.父元素#nav宽度为1173px。 So I set up width left and right element each 107px, 163px.所以我设置宽度左右元素各107px，163px。 naturally .gnb class get the rest value that is 903px. .gnb class 自然会得到 rest 的值，即 903px。 but .gnb class does not working.但是.gnb class 不工作。 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:)如果您正在寻找另一个问题，请对其进行更多解释:)

如何居中对齐文本

问题描述

1 个解决方案

解决方案1
1 2020-09-01 02:30:22

如何居中对齐文本

问题描述

1 个解决方案

解决方案1 1 2020-09-01 02:30:22

解决方案1
1 2020-09-01 02:30:22