ページを伸ばすことなく、私のヘッダーリンクを中央に設定する

ページを伸ばしずに自分のリンクh1をセンタリングすることができないようです。私はテキストの整列を使用してそれを中心にする方法を知っています：センター、そしてそれは中心に、リンクはページの全幅を伸ばしています。ページを伸ばすことなく、私のヘッダーリンクを中央に設定する

リンクを伸ばしずにセンターリングできますか？

.navigation { 
 
\t padding-top: 70px; 
 
\t padding-bottom: 70px; 
 
\t position: relative; 
 
\t text-transform: uppercase; 
 
\t 
 
} 
 

 
.brand-text { 
 
    font-family: 'Permanent Marker', cursive; 
 
\t font-size: 50px; 
 
\t color: black; 
 
\t -webkit-transition: color 1000ms ease; 
 
\t text-align: center; 
 
\t margin-bottom: 20px; 
 
\t margin-left: 0; 
 
\t margin-right: 0; 
 
\t margin-top: 0; 
 
    padding: 0; 
 
    display: block; 
 
} 
 

 

 
.brand-text:hover { 
 
\t color: grey; 
 
\t 
 
} 
 

 
.nav-brand { 
 
\t text-decoration:none; 
 
} 
 

 
.nav-menu { 
 
\t text-align: center; 
 
} 
 

 
.nav-link { 
 
\t padding-top: 7px; 
 
\t padding-bottom: 7px; 
 
\t margin-right: 20px; 
 
\t margin-left: 20px; 
 
\t text-decoration: none; 
 
\t color: grey; 
 
\t font-family: 'Raleway', sans-serif; 
 
\t -webkit-transition: color 700ms ease; 
 
\t position: relative; 
 
} 
 

 
.nav-link:hover { 
 
\t color: black; 
 
} 
 

 
.current { 
 
    color: black; 
 
} 
 

 
.current:hover { 
 
    color: 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Josh Corbett</title> 
 
\t <meta charset="UTF-8"> 
 
\t <link rel="stylesheet" type="text/css" href="stylesheet.css"> 
 
\t <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"> 
 

 
</head> 
 
<body> 
 
\t <div class="navigation"> 
 
\t \t <a class="nav-brand" href="#"><h1 class="brand-text">Title</h1></a> 
 
\t \t <div class="container"> 
 
\t \t \t <nav class="nav-menu" role="navigation"> 
 
\t \t \t \t <a class="nav-link current" href="#">Portfolio</a> 
 
\t \t \t \t <a class="nav-link" href="#">About</a> 
 
\t \t \t \t <a class="nav-link" href="#">Contact</a> 
 
\t \t \t \t <a class="nav-link" href="#">Blog</a> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </div> 
 
</body>

出典

2016-10-19 Josh Corbett

の下に、あなたは、延伸により何を意味するかについて、より詳しく説明してもらえますか？ページの外観はどうなっていますか？あなたが持っているものが望ましくないことは、どのように分かりますか？ – Xufox

注文を逆にして、リンクをh1に入れます。 – CBroe

あなたがオーバーフローを追加することができ

：隠されました;あなたのブランドテキストにまた

#LinkText { 
     width: 100%; 
     height: auto; 
     overflow: hidden; 
}

をやって試してみて、H1タグにLinkTextのIDを与えることができます。

出典

2016-10-19 23:28:43 sahmad

h1タグがブロック要素であり、ページの幅全体を占めるので、アンカーはページの全幅を伸ばしています...したがって、アンカーはヘッダータグのサイズにサイズを調整します。プロパティは古いbroswersによってサポートされていない変換....

：ここ....親としてアンカータグを配置するソリューション

が

#title { 
    display: inline-block; 
    position: relative; 
    text-align: center; 
    left: 50%; 
    transform: translate(-50%); 
    -ms-transform: translate(-50%); 
    -webkit-transform: translate(-50%); 
    -moz-transform: translate(-50%); 
    border: medium solid !important; 
}

注以下のCSSコードを追加することですスニペットを見る

position: relative; text-align: center; left: 50%; transform: translate(-50%); -ms-transform: translate(-50%); -webkit-transform: translate(-50%); -moz-transform: translate(-50%); border: medium solid !important; }

.navigation { padding-top: 70px; padding-bottom: 70px; position: relative; text-transform: uppercase; } .brand-text { font-family: 'Permanent Marker', cursive; font-size: 50px; color: black; -webkit-transition: color 1000ms ease; text-align: center; margin-bottom: 20px; margin-left: 0; margin-right: 0; margin-top: 0; padding: 0; display: block; } .brand-text:hover { color: grey; } .nav-brand { text-decoration: none; } .nav-menu { text-align: center; } .nav-link { padding-top: 7px; padding-bottom: 7px; margin-right: 20px; margin-left: 20px; text-decoration: none; color: grey; font-family: 'Raleway', sans-serif; -webkit-transition: color 700ms ease; position: relative; } .nav-link:hover { color: black; } .current { color: black; } .current:hover { color: } #title { display: inline-block; position: relative; text-align: center; left: 50%; transform: translate(-50%); -ms-transform: translate(-50%); -webkit-transform: translate(-50%); -moz-transform: translate(-50%); border: medium solid !important; }

<!DOCTYPE html> <html> <head> <title>Josh Corbett</title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet"> </head> <body> <div class="navigation"> <a class="nav-brand" href="#" id='title'><h1 class="brand-text">Title</h1></a> <div class="container"> <nav class="nav-menu" role="navigation"> <a class="nav-link current" href="#">Portfolio</a> <a class="nav-link" href="#">About</a> <a class="nav-link" href="#">Contact</a> <a class="nav-link" href="#">Blog</a> </nav> </div> </div> </body>

出典

2016-10-19 23:28:52 repzero

ページを伸ばすことなく、私のヘッダーリンクを中央に設定する

答えて

関連する問題