我可以按像素在 div 内使用 text-align 吗？答案

【问题标题】：Can i use text-align inside div by pixel?我可以按像素在 div 内使用 text-align 吗？
【发布时间】：2022-01-02 20:03:14
【问题描述】：

有什么方法可以对齐div 内的文本，但不使用text-align。我不想将它对齐到特定位置（中心、左侧等），但我想通过像素将它对齐到我想要的任何位置。例如在值中心和左侧之间。我也不想在div 中使用另一个元素。

我看起来是这样的：

HTML

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

CSS

 #div{
    text-align:220px;
    }

有什么想法吗？

【问题讨论】：

padding-left 应该这样做..
你可以选择很多选项，margins（我的推荐），padding，用 span 包裹它，position 它相对......等
你试过padding吗？
您能否澄清一下220px 是否意味着您希望文本在距左边缘 220 像素处左对齐？
@laaposto 很好——在这种情况下，下面的答案之一应该可以正常工作。 :)

标签： html css text-align

【解决方案1】：

您在寻找text-indent 吗？

#div{
  text-indent: 220px;
}

【讨论】：

【解决方案2】：

如果您使用margin 或padding 对齐文本，它们也会增加元素的大小，如果您知道CSS 框模型行为，那么如果您使用padding 对齐它们或margin 确保您使用以下内容

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

虽然上面会计算外部的margin，但会考虑元素内部的padding 和border。

另外，如果您只想对齐一个单词，最好使用text-indent 属性，它将您的文本缩进到您定义的特定px。

Demo

但这只会缩进第一行，所以如果你有一个单词，这将满足你的需要，但如果你想对齐多个元素，最好的办法是对每个单词使用 span 并且而不是使用padding缩进它

【讨论】：

【解决方案3】：

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

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

编辑

要避免在div 中出现tag，请使用：

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

【讨论】：

另外我不想在 div 中使用其他元素