如何根据特定字母定位一行文本？

Question

我有一行文字如下：

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

我想使用CSS定位文本行，以便字母D 位于页面的中心，如下所示：

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

有什么想法吗？

Answer 1

如果您使用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;
}

Answer 2

也许使用像

这样的东西

<div id="container" style="position: absolute; width:1000px; height:10px">
    <div id="innerContainer" style="position: absolute">
        <span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span>F</span>
    </div>
</div>

然后在$（document）.ready（）{}

中使用JQuery中的以下内容

var left_pad = 20; // set this to container width / 2
                   // calculate it or hard code it
$("#innerContainer").css("left"),$((left_pad - span:contains('D').position().left) + 'px')

就在我的头顶，没有时间进行测试，但希望它指出你正确的方向。有点耐心，这应该能够得到帮助。

Answer 3

@DavidThomas指出，JavaScript是必需的。我只是想稍微扩展一下。

由于以下几个主要原因，CSS无法实现这一目标：

1. 无法知道如何更改相关文字行，以便D居中，直到文档流成立为止。但CSS的应用程序是文档流程的核心，因此在应用CSS时，它无法知道最终生成的文档是什么。换句话说，如果可以使用CSS，我们手上就会有一个捕获22。为了“知道”如何定位该行文本，页面的CSS已经需要知道最终文档的样子。但是为了获得最终文档，首先需要应用CSS。
2. 即使1＆amp; 2并非如此，CSS仍无法分析页面，抓住元素的位置等等。这根本不是它的目的。

相比之下，JavaScript 可以用于解决此问题，因为：

1. 与CSS不同，JavaScript可以在文档流程建立后完成其工作。
2. JavaScript具有分析页面所需的工具，以便进行必要的更改。

很难说在不了解您的具体案例的情况下使用JavaScript实现的复杂程度。但是，如果您了解JavaScript，我认为它会非常简单。

Answer 4

这是发布的原因有两个：

1. 我评论说你需要使用JavaScript，
2. 有时，我无法自拔 ......

也就是说，这是一个简单的JavaScript解决方案，不需要任何库。这有点麻烦，我觉得必须有一些方法可以简化它，但是：

// helper function, to save typing later on.
function gEBTN(tag, parent, index) {
    if (!parent && !index) {
        return document.getElementsByTagName(tag);
    }
    else if (parent && !index) {
        return parent.getElementsByTagName(tag);
    }
    else if (index) {
        return parent.getElementsByTagName(tag)[index];
    }
}

// helper function, to save typing later on.
function gCS(elem, parent, prop) {
    if (!prop && parent) {
        return window.getComputedStyle(elem.parentNode, null).getPropertyValue('width');
    }
    else if (prop && parent == true) {
        return window.getComputedStyle(elem.parentNode, null).getPropertyValue(prop);
    }
    else if (!parent && !prop) {
        return window.getComputedStyle(elem, null).getPropertyValue('width');
    }
    else {
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    }
}

// page: number.
// navElemId: a quoted string, the Id of the element containing
//            the navigation elements, defaults to 'navigation'
// container: a quoted string, the type of element ('div','span','li'...)
//            that forms the navigation 'buttons.' Defaults to 'li.'
function centreNavigationOn(page, navElemId, container) {
    if (!page) { // at minimum you have to supply the page you want to centre on
        return false;
    }
    else {
        var navElemId = navElemId || 'navigation';
        var navElem = document.getElementById(navElemId);
        var containers = gEBTN(container) || gEBTN('li', navElem);
        for (var i = 0, len = containers.length; i < len; i++) {
            if (containers[i].innerHTML == page) {
                var centreOn = containers[i];
            }
            else {
                // just for an easy visual difference between the centred/current
                // page and the others. Adjust/remove according to taste
                containers[i].style.opacity = '0.3';
            }
        }
        if (!centreOn){
            // if no page is found to be centred on, quits
            console.log('No element found to centre on. Quitting now.');
            return false;
        }

        // again, just for simple visual difference between current and others...
        centreOn.style.backgroundColor = '#f90';
        centreOn.style.opacity = '1';

        // finds the width of the centreOn element
        var cOnWidth = parseInt(gCS(centreOn),10);
        var cOnLeftOffset = centreOn.offsetLeft;

        // the centreOn element's parent's parent's width
        // this made sense when I wrote it, now...I'm not so sure... =/
        cPPWidth = parseInt(gCS(centreOn.parentNode.parentNode),10);

        // works out by what distance the centreOn element's parent
        // must be moved in order to centre the centreOn element within the page.
        var moveBy = Math.round((cPPWidth/2) - (cOnLeftOffset + (cOnWidth/2)));
        centreOn.parentNode.style.marginLeft = moveBy + 'px';
    }
};

centreNavigationOn(4, 'navigation', 'li');​

JS Fiddle demo

注意：在没有window.getComputedStyle()实现的IE浏览器中，此函数将失败。这可能会保证，这个脚本不太可能被使用。或许，除了修改后的形式（我当然可以自由地将此脚本提供给任何想要使用它的人，甚至超出Stack Overflow的CC-By-SA license，因为我认为我能......）虽然如果有人修改它，我真的很感激他们链接到修改后的版本，无论是在评论中还是通过编辑这个答案来添加链接......

参考文献：

• element.innerHTML。
• element.offsetLeft。
• element.style。
• document.getElementById()。
• document.getElementsByTagName()。
• Math.round()。
• node.parentNode。
• parseInt()。
• window.getComputedStyle()。