Html 我可以按像素在 div 内使用文本对齐吗?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/20951397/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:21:27  来源:igfitidea点击:

Can i use text-align inside div by pixel?

htmlcsstext-align

提问by laaposto

Is there any way that i can align the text inside a divbut without using text-align. I dont want to align it to a specific position(center,left etc) but i want to align it where ever i want by pixel.For example between the values center and left. Also i dont want to use another element inside div.

有什么方法可以让我在 a 中对齐文本div但不使用text-align. 我不想将它对齐到特定位置(中心,左等),但我想通过像素将它对齐到我想要的任何位置。例如在值中心和左边之间。我也不想在里面使用另一个元素div

I am looking something like that:

我看起来像这样:

HTML

HTML

<div id="div">TEXT</div>

CSS

CSS

 #div{
    text-align:220px;
    }

Any ideas?

有任何想法吗?

采纳答案by Mr. Alien

If you use marginor paddingto align the text, they will increase the size of your element as well, if you are aware of the CSS box model behavior, so if you are aligning them using paddingor marginmake sure you use the below

如果您使用marginpadding对齐文本,它们也会增加元素的大小,如果您了解 CSS 框模型行为,那么如果您使用paddingmargin确保使用以下对齐它们

div {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

Though above will count the marginoutside but will consider the paddingand borderinside the element.

虽然上面会计算margin外部但会考虑元素paddingborder内部。

Also, if you are looking to align only a single word, than better use text-indentproperty which will indent your text to a specific pxyou define.

此外,如果您只想对齐一个单词,那么最好使用text-indent属性将文本缩进到px您定义的特定位置。

Demo

演示

But this will just indent 1st line so if you have a single word than this will suffice your needs, but if you want to align multiple elements, than the best thing to do here is to use spanfor each word and than indent it using padding

但这只会缩进第一行,因此如果您有一个单词,这将满足您的需求,但是如果您想对齐多个元素,那么最好的做法是span对每个单词使用而不是使用缩进padding

回答by enguerranws

Are you looking for text-indent?

你在找text-indent吗?

#div{
  text-indent: 220px;
}

回答by NoobEditor

No you can not, text-aligngives a general behavior for the text to alignas opposed to pxwhich is a measuring unit, also, logically speaking....220pxwont tell browser, which side of screen 220px is referring to....
i'll suggest using <p>or <span>instead

不,你不能,text-align给出文本对齐一般行为,而不是 px哪个是测量单位,而且,从逻辑上讲......220px不会告诉浏览器,屏幕的哪一侧 220px 指的是......
我会建议使用<p><span>代替

#div > span, #div > p{
     /*some margin or padding like
     margin-left : 220px;
     padding-left : 220px;
    */
    }

EDIT

编辑

To avoid a taginside div, use :

为了避免tag内部div,请使用:

div#cont {
    width:300px;
    height:400px;
    padding-left:150px; /*left-right-top-bottom-depend on ur choice*/
    border:1px solid #000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

solution demo

解决方案演示