gpt4 book ai didi

html - 如何根据特定字母定位一行文本?

转载 作者:太空宇宙 更新时间:2023-11-03 20:21:26 25 4
gpt4 key购买 nike

我有一行文字如下:

->A B C D E F G H I J                   <-

我想使用 CSS 定位文本行,使 字母 D 位于页面的中心,如下所示:

->             A B C D E F G H I J      <-

有什么想法吗?

最佳答案

如果您使用 monospaced font然后你可以使用 position:relative; 并移动你的文本行,因为每个字母和空格 具有相同的大小( demo )。您可以在没有固定宽度的字体上获得类似的结果,但是偏移量 (left:;) 有点难以计算,因为几乎每个字母都占据了另一个水平空间量。

<nav class="letter monospace">
<div>A B C D E F G H I J</div> <!-- monospaced font demo -->
</nav>
<nav class="letter">
<div>A B C D E F G H I J</div> <!-- standard browser font demo -->
</nav>
<div id="leftmiddle"> </div>
<div id="rightmiddle"> </div>
nav.letter{
font-size:2em;
text-align:center;
}
nav.letter > div{ /* standard browser font */
position:relative;
left:1.05em; /* you have to calculate the horizontal shift yourself based on the font you're using */
}
nav.letter.monospace{
font-family:monospace;
}
nav.letter.monospace > div{ /* monospaced font */
position:relative;
left:1.75em; /* to center the row around 'E' change to 0.75em, for C to 2.75em... */
}

nav ~ div{
width:49%;
min-height:200px;
height: 80%;
}
#leftmiddle{ float:left; border-right:1px solid;}
#rightmiddle{ float:right; border-left:1px solid;}

HTML4 demo, working in IE7-9, FF10, Opera, Chrome .

更新:查看此备选方案 demo (在 IE7-9、FF10、Opera、Chrome 中工作):

<div class="letter">
<div class="wrapper">
<div class="before">
A B C
</div>
D
<div class="after">
E F G H I J
</div>
</div>
</div>
.letter{
text-align:center;
overflow:hidden;
}
.letter > .wrapper{
width:1em;
margin:auto;
position:relative;
}
.letter > .wrapper > .before{
position:absolute;
right:125%;
text-align:right;
width:10em;
}
.letter > .wrapper > .after{
position:absolute;
text-align:left;
top:0;
left:125%;
width:20em;
}

关于html - 如何根据特定字母定位一行文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9654150/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com