จัดข้อความในส่วนหัวตามแนวนอน

ขอบคุณที่ช่วยฉันออกไป

ฉันกำลังพยายามจัดข้อความในแนวตั้งและแนวนอนในส่วนหัว มันติดอยู่ที่ด้านล่างสุดของส่วนหัว

ดูเหมือนว่าฉันไม่สามารถย้ายข้อความจากด้านล่างของส่วนหัวได้เลย ฉันมีช่องว่างภายใน 0 อันในร่างกายของฉัน

ความช่วยเหลือใด ๆ ที่ชื่นชมมาก

ฉันกำลังพยายามจัดข้อความให้อยู่ตรงกลางส่วนหัว ทั้งแนวตั้งและแนวนอน

HTML

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

ซีเอสเอส

    .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 แหล่งที่มา
comment
โปรดสร้างซอที่แสดงถึงสิ่งที่เกิดขึ้น   -  person Maxwell s.c    schedule 05.09.2017

คำตอบ (1)


arrow_upward
0
arrow_downward

ดังนั้นฉันจึงแก้ไขคำตอบเพื่อแก้ไขกรณีของคุณ:

ในกรณีของคุณ หากคุณต้องการจัดองค์ประกอบที่มีตำแหน่งสัมบูรณ์ในแนวตั้งและแนวนอน คุณควรใช้ออฟเซ็ตด้านบน/ล่างและออฟเซ็ตซ้าย/ขวา

จัดกึ่งกลางแนวนอนและแนวตั้ง :

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%);
}
person Victor Allegret    schedule 05.09.2017
comment
ขอบคุณสำหรับการตอบกลับของคุณ. ฉันควรลบการปรับเปลี่ยนออกจาก ul li และ ul หรือไม่ ฉันจะลองดู - person SubZeroFish; 05.09.2017
comment
หากคุณใช้ flexbox คุณไม่จำเป็นต้องสร้าง ul position: absolute; จากนั้นคุณจะต้องอัปเดตสไตล์ ul / li ขึ้นอยู่กับสิ่งที่คุณต้องการ @SubZeroFish - person Victor Allegret; 05.09.2017
comment
ถ้าฉันเพิ่มที่ด้านล่างสุด: 50% มันวางข้อความไว้นอกส่วนหัว เป็นไปได้ไหมที่จะจำกัดให้เหลือเพียง 50% ในส่วนหัวเท่านั้น ขอบคุณสำหรับความช่วยเหลือของคุณ. - person SubZeroFish; 05.09.2017
comment
หากคุณยังคงใช้ตำแหน่งสัมบูรณ์ คุณสามารถเพิ่ม bottom: 50%; transform: translateY(50%); : กึ่งกลางแนวตั้ง | left: 50%; transform: translateX(-50%); : กึ่งกลางแนวนอน | left: 50%; bottom: 50%; transform: translate(50%, -50%); จัดกึ่งกลางแนวตั้งและแนวนอน @SubZeroFish - person Victor Allegret; 05.09.2017