将一个元素置于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我也写了一个快速的片段。