如何居中對齊文本
[英]How to align text in center
問題描述
我希望全局導航欄居中對齊。 #nav in .gnb class.父元素#nav寬度為1173px。 所以我設置寬度左右元素各107px，163px。 .gnb class 自然會得到 rest 的值，即 903px。 但是.gnb class 不工作。 為什么會這樣？
/* 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>
1 個解決方案
解決方案1
1 2020-09-01 02:30:22
我不明白你想用“不工作”這個詞來表達什么，但在樣式表上發現了錯別字：
#header .right li,
a{
該行不需要逗號。 如果您正在尋找另一個問題，請對其進行更多解釋:)
如何使文本在桌面上對齊，而在小型設備上居中對齊？
[英]How to left text align on desktop but text align center on small devices?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.