將一個元素置於nav中間

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> s設置絕對位置，以使它們脫離正常內容流。然後只集中中間<li>。對於對齊，您可以使用transform。

這將確保中間圖像始終水平居中。另外兩邊的其他物品垂直居中。

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>

嘗試使用Flexbox的。這是一個有用的網站解釋它：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes我也寫了一個快速的片段。