ナビゲーションの途中で要素を中心にする

Question

ナビゲーション全体のブロックではなく、画像の位置に基づいて中央に配置するにはどうすればよいですか？

私はこれを考えていた理由は、誰かが長い名前を持っていれば、navは中心に見えないからです。私は相対的なポジションを作ることに疑問を抱いていましたが、それがうまくいくかどうか、あるいは浮動小数点数を使うかどうかは分かりません。

.profileinfo { 
 
    padding: 0 10px; 
 
    float: left; 
 
} 
 
.profileinfo:nth-child(2) img { 
 
    align: middle; 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
} 
 
.profileinfo:first-child { 
 
    border-right: 1px solid silver; 
 
} 
 
.profileinfo:last-child { 
 
    border-left: 1px solid silver; 
 
} 
 
.profileinfo:last-child, 
 
.profileinfo:first-child { 
 
    margin-top: 20px; 
 
} 
 
#container { 
 
    height: 80px; 
 
    width: 300px; 
 
    margin: 10px auto; 
 
    padding: 0; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
}

<ul id="container"> 
 
    <li class="profileinfo">Ashley Siwiec</li> 
 
    <li class="profileinfo"> 
 
    <a href="/accounts/profile/"> 
 
     <img src="//dummyimage.com/60"> 
 
    </a> 
 
    </li> 
 
    <li class="profileinfo">C: 175</li> 
 
</ul>

Answer 1

<li>の最初と最後の絶対位置は、通常のコンテンツフローから外れるように設定できます。その後、中央を中心にします<li>。アラインメントのために、transformを使用することができます。

これにより、中央の画像が常に水平にセンタリングされます。そして、両側に2つの他のアイテム、垂直にセンタリングされています。

body { 
 
    background: grey; 
 
} 
 

 
.container { 
 
    position: relative; 
 
    list-style-type: none; 
 
    width: 300px; 
 
    height: 60px; 
 
    margin: 10px auto; 
 
    padding: 0; 
 
    text-align: center; 
 
    color: white; 
 
} 
 

 
.container li { 
 
    display: inline-block; 
 
    padding: 0 10px; 
 
} 
 

 
.container li:nth-child(2) { 
 
    width: 60px; 
 
    height: 60px; 
 
} 
 

 
.container li:nth-child(2) img { 
 
    border-radius: 50%; 
 
} 
 

 
.container li:first-child, 
 
.container li:last-child { 
 
    position: absolute; 
 
    top: 50%; 
 
} 
 

 
.container li:first-child { 
 
    border-right: 1px solid white; 
 
    transform: translateX(-100%) translateY(-50%); 
 
} 
 

 
.container li:last-child { 
 
    border-left: 1px solid white; 
 
    transform: translateY(-50%); 
 
} 
 

 
.container li a { 
 
    color: inherit; 
 
}

<ul class="container"> 
 
    <li>Ashley Siwiec</li> 
 
    <li><a href="/accounts/profile/"><img src="//dummyimage.com/60"></a></li> 
 
    <li>C: 175</li> 
 
</ul> 
 

 
<ul class="container"> 
 
    <li>Ashleeeeey Siwieeeeec</li> 
 
    <li><a href="/accounts/profile/"><img src="//dummyimage.com/60"></a></li> 
 
    <li>C: 175</li> 
 
</ul>

jsFiddle

Answer 2

.profileinfo:nth-child(2) { 
 
    background: #111; 
 
} 
 

 
.profileinfo:nth-child(2) img{ 
 
    width: 60px; 
 
    height: 60px; 
 
    border-radius: 50%; 
 
} 
 
.profileinfo:first-child { 
 
    border-right: 1px solid white; 
 
} 
 
.profileinfo:last-child { 
 

 
    border-left: 1px solid white; 
 

 
} 
 
.profileinfo:last-child, .profileinfo:first-child { 
 
    margin-top:20px; 
 
} 
 
#container { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
}

<ul id="container"> 
 
    <li class="profileinfo">Ashlefdsgsdfgfdsgdfsgy Siwiec</li> 
 
    <li class="profileinfo"> 
 
    <a href="/accounts/profile/"> 
 
     <img src="/images/profilepics/github-512.png"> 
 
    </a> 
 
    </li> 
 
    <li class="profileinfo">C: 175</li> 
 
</ul>

フレキシボックスを使用してみてください。ここでそれを説明する役に立つサイトです：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes私はまた、簡単なスニペットを書いています。