センター私は、ヘッダーの下にすぐに子供を中心にしたいヘッダ

/* Global */ 
 
* { 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t font-family: "Lato", sans-serif; 
 
} 
 

 
/* Header */ 
 
header { 
 
\t width: 100vw; 
 
\t padding: 1.5em; 
 

 
\t background-color: #ccc; 
 
} 
 

 
header > a { 
 

 
\t background-color: yellow; 
 
} 
 

 
/* Navigation */ 
 
nav { 
 
\t display: inline-block; 
 

 
\t background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
\t <head> 
 
\t \t <!-- Meta --> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
\t \t <!-- Title --> 
 
\t \t <title>Saad Al-Sabbagh | Web Developer</title> 
 

 
\t \t <!-- CSS --> 
 
\t \t <link rel="stylesheet" href="css/normalize.css"> 
 
\t \t <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700"> 
 
\t \t <link rel="stylesheet" href="css/main.css"> 
 
\t </head> 
 

 
\t <body> 
 

 
\t \t <!-- Header --> 
 
\t \t <header> 
 

 
\t \t \t <!-- Navigation --> 
 
\t \t \t <nav> 
 
\t \t \t \t <a href="#">Portfolio</a> 
 
\t \t \t \t <a href="#">Expertise</a> 
 
\t \t \t \t <a href="#">About</a> 
 
\t \t \t \t <a href="#">Contact</a> 
 
\t \t \t </nav> 
 

 
\t \t \t <a href="#">Saad Al-Sabbagh</a> 
 

 
\t \t </header> 
 

 
\t </body> 
 

 
</html>

でアンカー要素の整列、それはNAV外のアンカー要素です。

ヘッダーは全角で、ナビゲーションはインラインブロックですが、テキストアライメントを実行しようとすると：center;それは動作していないようです。

このプロパティはブロックレベルの要素でしか機能しないとの結論に達しました。結論が真であると確信しています。

テキストを中央に配置するにはどうすればよいですか？

出典

2016-10-29 Saad Al-Sabbagh

..絶対にする必要が判明？ – Roy

@Royそれはロゴ自体ではなく、ロゴとして機能するテキストですが、とにかくそれを中心にしたいと思っています。 –

@ SaadAl-Sabbagh [https://jsfiddle.net/tjbaezid/dgaynmxp/1/]このようなものを探していますか？ –

は、私を修正しますが、これはあなたが望んでいたものです。私はナビゲーションをリストにして、「ロゴ」にクラスを入れました。

.logo { 
    text-align: center; 
}

これはテキストを中央に維持し、行/ブロック全体ではなくテキストのみをクリックできるようにします。解決しよう

/* Global */ 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: "Lato", sans-serif; 
 
} 
 
/* Header */ 
 

 
header { 
 
    width: 100vw; 
 
    position: relative; 
 
    padding: 1.5rem; 
 
    background-color: #ccc; 
 
} 
 
header > a { 
 
    background-color: yellow; 
 
} 
 
/* Navigation */ 
 

 
nav { 
 
    position: absolute; 
 
    top: 24px; 
 
    left: 10px; 
 
    display: inline-block; 
 
    background-color: red; 
 
} 
 
.list, 
 
.list-item { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.list { 
 
    list-style: none; 
 
} 
 
.list-item { 
 
    display: inline-block; 
 
} 
 

 
.logo { 
 
    text-align: center; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <!-- Meta --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <!-- Title --> 
 
    <title>Saad Al-Sabbagh | Web Developer</title> 
 

 
    <!-- CSS --> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700"> 
 
</head> 
 

 
<body> 
 

 
    <!-- Header --> 
 
    <header> 
 

 
    <!-- Navigation --> 
 
    <nav> 
 
     <ul class="list"> 
 
     <li class="list-item"><a href="#">Portfolio</a> 
 
     </li> 
 
     <li class="list-item"><a href="#">Expertise</a> 
 
     </li> 
 
     <li class="list-item"><a href="#">About</a> 
 
     </li> 
 
     <li class="list-item"><a href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 

 
    <div class="logo"> 
 
     <a href="#">Saad Al-Sabbagh</a> 
 
    </div> 
 

 
    </header> 
 

 
</body> 
 

 
</html>

出典

2016-10-29 12:28:46 Roy

残念ながら、私は望んでいない別の行にアンカーを置いています。私はこのようなものを大まかな例（http：//hej.ch/）として望みます。 –

@ SaadAl-Sabbagh 'text-align：center'テキストは中央にあり、メニューは左上隅に' position：absolute'します。 – Roy

@ SaadAl-Sabbaghウェブサイトを反映するようにコードスニペットを更新しました。 – Roy

アンカーをdivに囲み、下のスタイルを設定します。 HTMLで

：CSSで

<div id="centeredAfterNav"><a href="#">Saad Al-Sabbagh</a></div>

：私が間違っている場合

#centeredAfterNav { 
    display: inline; 
    /*left-margin: 100px;*/ /* Width of left aligned nav, to center in the remaining space */ 
    text-align: center; 
}

出典

2016-10-29 12:20:17

これはすべてを中央揃えにするため、navの外にあるアンカー要素とヘッダーの内側を中央揃えにし、navを左揃えにします。私はすべてを整列させたいとは思っていません。 –

navの後にリンクをセンターする答えを更新しました。 –

IDが不要なときは絶対に使用しないでください。なぜあなたはマージンが残っている必要がありますか？ – Roy

：あなたは、ロゴになりたいん

nav { 
position: absolute; 
left: 0; 
top: 18px; 
padding-left: 21px; 
text-align: left; 
width: 500px; 
}

出典

2016-10-29 13:02:00

センター私は、ヘッダーの下にすぐに子供を中心にしたいヘッダ

答えて

関連する問題