ヘッダーのテキストを水平に整列させてくれてありがとうございます。

ヘッダーにテキストを縦横に整列しようとしています。それはちょうどヘッダーの一番下に止まっている。

ヘッダーの下部からテキストを移動できないようです。私は私の体に0の詰め物があります。

ご迷惑をおかけして申し訳ありません。

HTML

<body> 
<div class="background"> 
<div class="header"> 
<div class="menu"> 
    <ul class="nav"> 
     <li id="nav-products"><a href="#">Products</a></li> 
     <li id="nav-contact"><a href="#">Contact</a></li> 
     <li id="nav-about"><a href="#">About</a></li> 
    </ul> 
    <div class="logo"> 
     <img src="images/Logo sketch.png"> 
    </div> 
</div> 
</body>

CSS

.nav { 
     box-sizing: border-box; 
     text-decoration: none; 
     font-family: 'Montserrat', sans-serif; 
     position: relative; 

    } 

    .header { 
     background-color: white; 
     padding-top: 100px; 
     background-size: cover; 
     background-position: center; 
     position: relative; 


    } 

    ul { /*text header*/ 
     list-style: none; 
     position: absolute; 
     text-align: center; 
     border: 2px dashed #f69c55; 

    } 

    ul li { 
     outline: 0 none; 
     display: inline-block; 
     padding: 0 2.6em; 
     margin: 0; 

    } 

    a { 
     color: #111; 
     font-size: 16px; 
     font-style: normal; 
     font-weight: 100; 
    } 
    a:link { 
     text-decoration: none; 
    } 
    a:visited { 
     text-decoration: none; 
     color: black; 
    } 
    a:hover { 
     text-decoration: none; 
     color: black; 
    } 
    a:active { 
     text-decoration: none; 
     color: black; 
    }

出典

2017-09-05 SubZeroFish

何が起こっているのかを示すフィドルを作成してください –

だから私はあなたのケースを解決するために私の答えを編集している：あなたのケースでは

、あなたが中央に必要がある場合垂直方向に&が絶対配置された要素、 d上/下と左/右のオフセットを使用します。

ul{ 
    position: absolute; 
    /* Add top & left offset */ 
    top: 50%; 
    left: 50%; 
    /* Transform your element to perfectly center it */ 
    transform: translate(-50%, -50%); 
}

センター水平：水平垂直&

センター垂直

ul{ position: absolute; /* Add left offset */ left: 50%; /* Transform your element to perfectly center it */ transform: translateX(-50%); }

センター：

ul{ position: absolute; /* Add top offset */ top: 50%; /* Transform your element to perfectly center it */ transform: translateY(-50%); }

出典

2017-09-05 14:39:01

あなたの返事をありがとう。私はul liとulから調整を取り除くべきですか？私はそれを試してみましょう。 – SubZeroFish

フレックスボックスを使用する場合は、ul 'position：absolute;'を作る必要はありません。その後、必要なものに応じてul/liスタイルを更新する必要があります。@SubZeroFish –

ul "bottom：50％"に追加すると、ヘッダーの外側にテキストを配置します。それはヘッダのちょうど50％に制限することが可能ですか？ご協力いただきありがとうございます。 – SubZeroFish

ヘッダーのテキストを水平に整列させてくれてありがとうございます。

答えて

関連する問題