ヘッダー要素の中央にロゴボタンを表示させるにはどうすればいいですか

Question

ヘッダー要素の真ん中にロゴを表示させようとしています。 （私は中央に表示されないボタンは3番目のリスト項目で、クラス名はlogobuttonです。Iveはtext-alignを使用しようとしましたが、変更はありません。中央のオプションIは、テキスト整列とスタイルを試してみました：。。中央が、それはリスト全体を中央）

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プロパティを定義します：

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も提供してください。

また、には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>

：

コードを参照してください