[英]Can a line be centered around specific text using only css?
I want to have php generated navigation bar. 我想有php生成的导航栏。 It will consist of a left side with a list of links to the directories below the current one, a link to the index of the current directory, and the right side with a list of links to directories directly inside the current one. 它将包含一个左侧,其中包含指向当前目录下方目录的链接列表,一个指向当前目录索引的链接,右侧包含指向当前目录内直接目录的链接列表。
tester1 > tester2 | tester1> tester2 | index | 指数| tester4a tester4b tester4a tester4b
I would like to center this navigation bar around 'index', regardless of the length of the left or right. 无论左侧或右侧的长度如何,我都希望将此导航栏置于“索引”周围。 I know I could pad the arrays to equal length within the php that generates it, but I'm interested in whether or not I could do this with html and/or css. 我知道我可以在生成它的php中将数组填充到相同的长度,但我对是否可以用html和/或css执行此操作感兴趣。
或者你可以尝试假装“浮动:中心”
Pretty easily actually. 实际上很容易。 You may need to play with the widths to fit your context, but pretty straight forward. 您可能需要使用宽度来适应您的上下文,但非常直接。
<div class="main">
<div class="left">
stuff in here
</div>
<div class="center>
INDEX
</div>
<div class="right">
stuff in here too
</div>
</div>
CSS: CSS:
.main {
width: 410px;
text-align: center;
}
.main > div {
display: inline-block;
}
.left {
width: 175px;
text-align: right;
}
.center {
width: 50px;
text-align: center;
}
.right {
width: 175px;
text-align: left;
}
.main > div > * {
display: inline;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.