Sejajarkan teks secara horizontal di header

terima kasih telah membantu saya.

Saya mencoba menyelaraskan teks saya secara vertikal dan horizontal di header saya. Itu hanya tertahan di bagian paling bawah header.

Sepertinya saya tidak bisa memindahkan teks dari bagian bawah header sama sekali. Saya memiliki 0 bantalan di tubuh saya.

Bantuan apa pun sangat dihargai.

Saya mencoba menyelaraskan teks di tengah header, secara vertikal dan horizontal.

HTML

<body>
<div class="background">
<div class="header">
<div class="menu">   
     <ul class="nav"> 
        <li id="nav-products"><a href="/id#">Products</a></li>
        <li id="nav-contact"><a href="/id#">Contact</a></li>
        <li id="nav-about"><a href="/id#">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;
    }

text html css header
person SubZeroFish    schedule 05.09.2017    source sumber
comment
Silakan buat biola yang menggambarkan apa yang sedang terjadi   -  person Maxwell s.c    schedule 05.09.2017

Jawaban (1)


arrow_upward
0
arrow_downward

Jadi saya mengedit jawaban saya untuk menyelesaikan kasus Anda:

Dalam kasus Anda, jika Anda perlu memusatkan elemen dengan posisi absolut secara vertikal & horizontal, Anda harus menggunakan offset atas/bawah dan kiri/kanan.

Pusatkan secara horizontal & vertikal :

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

Pusat secara horizontal :

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

Pusatkan secara vertikal :

ul{
  position: absolute;
  /* Add top offset */
  top: 50%;
  /* Transform your element to perfectly center it */
  transform: translateY(-50%);
}
person Victor Allegret    schedule 05.09.2017
comment
Terima kasih untuk balasan Anda. Haruskah saya menghapus penyesuaian dari ul li, dan ul? Saya akan mencobanya. - person SubZeroFish; 05.09.2017
comment
Jika Anda menggunakan flexbox Anda tidak perlu membuat ul position: absolute;. Maka Anda perlu memperbarui gaya ul/li Anda tergantung pada apa yang Anda butuhkan @SubZeroFish - person Victor Allegret; 05.09.2017
comment
Jika saya menambahkan di ul bawah: 50%. Ini menempatkan teks di luar header. Mungkinkah membatasinya menjadi 50% hanya di header? Terima kasih atas bantuan Anda. - person SubZeroFish; 05.09.2017
comment
Jika Anda masih menggunakan posisi absolut, Anda dapat menambahkan bottom: 50%; transform: translateY(50%); : vertikal tengah | left: 50%; transform: translateX(-50%); : tengah horizontal | left: 50%; bottom: 50%; transform: translate(50%, -50%); pusatkan @SubZeroFish secara vertikal & horizontal - person Victor Allegret; 05.09.2017