如何讓我的標誌按鈕出現在標題元素的中間

Question

嘿，我試圖讓我的標誌出現在標題元素的中間，我不知道還有什麼要嘗試。 （我不會做的按鈕出現在中間是第三個列表項，類名是logbutton。我試圖使用文本對齊，沒有任何更改。唯一改變的是當我使用浮動但浮動沒有中心選項我試圖風格的text-align：。中心，但該中心的整個列表）

header { 
 
    border-color: black; 
 
    background-color: #DC143C; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
@font-face { 
 
    font-family: TransFormers; 
 
    src: url('fonts/Transformers Movie.ttf') format('truetype'); 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.a-nav-top:hover { 
 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0  rgba(0,0,0,0.19); 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li a.button { 
 
    border-radius: 30px; 
 
    text-align: center; 
 
    display: inline; 
 
    background-color: black; 
 
    color: #DC143C; 
 
    width: 10%; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 

 
li a.logobutton { 
 
    font-family: TransFormers; 
 
    text-align: center; 
 
    color: black; 
 
}

<header> 
 
    <ul> 
 
    <li><a class="a a-nav-top button" href="#">Home</a></li> 
 
    <li><a class="a a-nav-top button" href="#">Shop</a></li> 
 
    <li><a class="logobutton" href="#">RG</a></li> 
 
    </ul> 
 
</header>

Answer 1

您可以在父ul和孩子的優勢position財產li，並使用calc()值來定義兒童的left屬性li：

ul { 
 
    _position: relative; /* added; first example */ 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
/* first example */ 
 
ul > li:last-child { /* could also use :nth-child(3) */ 
 
    _position: absolute; /* added */ 
 
    _left: calc(50% - 11.1px); /* half of the header width - half of the logo width */ 
 
} 
 
/*****/ 
 

 
/* second example */ 
 
ul { 
 
    display: flex; /* added */ 
 
    justify-content: space-between; /* added */ 
 
} 
 
/*****/ 
 

 
header { 
 
    border-color: black; 
 
    background-color: #DC143C; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
@font-face { 
 
    font-family: TransFormers; 
 
    src: url('fonts/Transformers Movie.ttf') format('truetype'); 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.a-nav-top:hover { 
 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0  rgba(0,0,0,0.19); 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li a.button { 
 
    border-radius: 30px; 
 
    text-align: center; 
 
    display: inline; 
 
    background-color: black; 
 
    color: #DC143C; 
 
    width: 10%; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 

 
li a.logobutton { 
 
    font-family: TransFormers; 
 
    text-align: center; 
 
    color: black; 
 
}

<header> 
 
    <ul> 
 
    <div> 
 
     <li><a class="a a-nav-top button" href="#">Home1</a></li> 
 
     <li><a class="a a-nav-top button" href="#">Shop1</a></li> 
 
    </div> 
 
    <li><a class="logobutton" href="#">RG</a></li> 
 
    <div> 
 
     <li><a class="a a-nav-top button" href="#">Home2</a></li> 
 
     <li><a class="a a-nav-top button" href="#">Shop2</a></li> 
 
    </div> 
 
    </ul> 
 
</header>

Answer 2

你能做的就是用你的.logobutton元素上的position: absolute財產和適用零個值top, bottom, left & right特性，使其居中對齊（因爲其錨標記，你需要還提供display: block，使其表現得像塊級元素一樣。

另外，向父母ul提供position: relative。

參考代碼：

header { 
 
    border-color: black; 
 
    background-color: #DC143C; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-right: 5px; 
 
    padding-left: 5px; 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color: black; 
 
} 
 

 
@font-face { 
 
    font-family: TransFormers; 
 
    src: url('fonts/Transformers Movie.ttf') format('truetype'); 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
.a-nav-top:hover { 
 
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li a.button { 
 
    border-radius: 30px; 
 
    text-align: center; 
 
    display: inline; 
 
    background-color: black; 
 
    color: #DC143C; 
 
    width: 10%; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 

 
li a.logobutton { 
 
    font-family: TransFormers; 
 
    text-align: center; 
 
    color: black; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<header> 
 
    <ul> 
 
    <li><a class="a a-nav-top button" href="#">Home</a></li> 
 
    <li><a class="a a-nav-top button" href="#">Shop</a></li> 
 
    <li><a class="logobutton" href="#">RG</a></li> 
 
    </ul> 
 
</header>