Как полностью позиционировать исходный текст текста в HTML

Я озадачен следующей проблемой. Я хочу (абсолютно) позиционировать базовую часть некоторого фрагмента текста HTML при определенной координате y, тогда как текст должен начинаться с определенной координаты x. Следующая диаграмма наглядно демонстрирует эту проблему.Как полностью позиционировать исходный текст текста в HTML

a diagram

Так что я в основном хотят контролировать, когда точка (х, у), отныне называется «Basepoint», на диаграмме находится на экране, относительно верхнего левого угла ТЕЛА документа или некоторой DIV. Важно: я заранее не знаю, что такое шрифт или размер шрифта. Это важно, потому что я не хочу менять все позиции в моем CSS всякий раз, когда меняю шрифты.

В следующем коде я пытаюсь расположить базовую точку в точке (200,100), но вместо этого она позиционирует верхний левый угол DIV в этой точке.

<html> 
    <style> 
     BODY 
     { 
      position: absolute; 
      margin: 0px; 
     } 

     #text 
     { 
      position: absolute; 
      top: 100px; 
      left: 200px; 

      font-family: helvetica, arial; /* may vary */ 
      font-size: 80px;    /* may vary */ 
     } 
    </style> 
    <body> 
     <div id="text">css=powerful</div> 
    </body> 
</html>

Как изменить этот код? Должен ли я использовать свойство vertical-align объекта DIV? (Я пытался, но не смог получить желаемый результат).

Благодарим за любые полезные ответы.

источник

2013-12-07 peter p

Зак прав, так как это абсолютное положение, вы можете переместить его. – Ani

Это то, что вы хотите? http://jsfiddle.net/4u4qw/ – Ani

@Ani Нет, он означает выравнивание исходной строки текста, начиная с заданного значения –

Попробуйте это:

HTML:

<div id="text-holder"> 
<div id="text-holder-position"></div> 
<div id="text">css=powerful</div> 
</div> 
<div id="heightJudger"></div>

CSS:

BODY 
{ 
    position: absolute; 
    margin: 0px; 
} 
#text 
{ 
    position: relative; 
    margin-top:-0.938em; 
    left:0px; 
    font-family: helvetica, arial; 
    font-size: 80px; 

    /*You can remove this*/ 
    background: yellow; 
    opacity: 0.5; 

} 
#text-holder 
{ 
    position: absolute; 
    height: 200px; 
    left: 200px; 
} 

#text-holder-position { 
    position: relative; 
    height: 200px; 
    width: 200px; 
    background: green; 
} 

#heightJudger { 
    position:absolute; 
    height:200px; width:200px; 
    background:red; 
    top:0; left:0; 
}

, если вы хотите, чтобы изменить положение, изменить "высота" и "левые" параметры #text-holder Таким образом, вы сможете контролировать свою позицию базовой точки. Я поставил сумерку высоты и некоторый цвет, чтобы вы могли видеть, что это то, что вы делаете.

EDIT: Изменен блок ввода текста в текстовом поле. JSFiddle

источник

2013-12-07 16:00:06 Cladiuss

[jsFiddle] (http://jsfiddle.net/xMt76/1/), чтобы показать, что он отлично работает! –

Это выравнивает ** нижнюю часть ** DIV до y = 100, тогда как целью было выровнять ** базовую линию ** с y = 100. –

И тогда это выравнивает базовую линию в нижней части div, до y = 100 – Cladiuss

jsFiddle Гуфи (и сумасшедший уродливый/хаки), но он работает.

<body> 
    <div id="spacer"></div> 
    <div id="text"> 
     <img src="http://placehold.it/10X100" id="baseline">css=powerful</div> 
</body>

...

body { 
     margin: 0px; 
    } 

    #spacer { 
     float: left; 
     width: 190px; 
     height: 100px; 
     background-color: red; 
    } 
    #baseline { 
     visibility: hidden; 
    } 
    #text { 
     float: left; 
     background-color: yellow; 
     font-family: helvetica, arial; /* may vary */ 
     font-size: 60px;    /* may vary */ 
    }

Редактировать Я думаю, на самом деле, это все об изображении. Таким образом, вы можете просто упростить и использовать прозрачный разделитель gif. Я знаю, все еще глупый хриплый. jsFiddle

источник

2013-12-07 19:13:21 keyboardSmasher

Распорки изображения! Добро пожаловать в 2001. :) – keyboardSmasher

Ну, это работает, но я искал более элегантное решение. HTML/CSS - это самый используемый в мире язык форматирования, поэтому должен быть элегантный способ справиться с этой довольно простой проблемой (правильно?) –

@peterp Да, согласен. Но это выглядит как хакерский беспорядок, как я опубликовал, или решение javascript может быть единственным способом. В конце концов, если бы это была легкая проблема, у вас было бы уже два десятка ответов. :) – keyboardSmasher

По умолчанию inline-block/inline и текст в блоке выравниваются по вертикали. Создайте псевдоэлемент внутри блока, который вы хотите переместить в Y, и определите высоту этой проставки.

/** 
 
Create a vertical spacer. It will be aligned with the parent's content baseline: 
 
**/ 
 
.text::before{ 
 
    content: ""; 
 
    /*the Y value:*/ 
 
    height: 100px; 
 
    width: 0px; 
 
    display: inline-block; 
 
} 
 

 
/** 
 
The rest (only for this demo) 
 
**/ 
 
body{ 
 
    font-family: sans-serif; 
 
    font-size: 60px; 
 
    margin: 0; 
 
} 
 
body::before{ 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 100px; 
 
    width: 100%; 
 
    height: 2px; 
 
    margin: -1px 0; 
 
    background-color: #00D500; 
 
    z-index: 1; 
 
} 
 
body::after{ 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 200px; 
 
    height: 8px; 
 
    width: 8px; 
 
    margin: -4px; 
 
    border-radius: 50%; 
 
    background-color: #FF0077; 
 
    z-index: 1; 
 
} 
 

 
.text { 
 
    margin: 0; 
 
    position: absolute; 
 
    /*the X value:*/ 
 
    left: 200px; 
 
}

<p class="text">css=powerful</p>

источник

2016-04-07 12:21:21 mems

Hacky решение, основанное на this blog post.

HTML:

<body> 
    <div id="text">css=powerful</div> 
</body>

CSS:

body { 
    margin: 0; 
} 
#text { 
    font-size: 30px; 
    line-height: 0px; 
    margin-left: 100px; 
} 
#text:after { 
    content: ""; 
    display: inline-block; 
    height: 120px; 
}

JsFiddle. Базовая точка выровнена (100, 120).

источник

2016-04-07 14:16:49 psmith

Как полностью позиционировать исходный текст текста в HTML

ответ

Смежные вопросы