CSS 替换文本对齐百分比

Question

Sticky speaking 这就是问题本身： CSS3 中是否有任何属性允许放置一些元素，如 <p> 或 <h$> 中的任何元素，如 text-align，但以百分比形式放置。

例如HTML代码：

<p id="first">Here's first P</p>
<p id="second">Here's second P</p>

及其样式：

    <style>
        #first {
        margin-left: 50%;
        }
        #second {
            text-align: center;
        }
    </style>

不同宽度看起来不一样。有没有属性像 background-position 但对于上面介绍的这些元素？

Answer 1

尝试：

#first {
    margin: 0 auto;
    display: inline-block; (this is optional)
}

Answer 2

您可以将 vertical-align 与百分比一起使用，但在您的情况下，主要问题是您使用的是 <p> 自动生成新段落的元素，如果你把它换成<span>你可以测试百分比，这里是代码：

#first {
       // margin-left: 50%;
}
#second {
        vertical-align:30%;
}
#third {
        vertical-align:50%;
}
#fourth {
        vertical-align:80%;
}

#cont{
  height:200px;
  background-color:red;
  }

  <div id="cont">
    <span id="first">Here's first P</span>
    <span id="second">Here's second P</span>
    <span id="third">Here's third P</span>
    <span id="fourth">Here's fourth P</span>
  </div>

可以看例子here

Answer 3

您可以使用 text-ident 来识别您的文本

Link

Answer 4

您可以使用翻译属性（使用 vw 单位（视图宽度单位））。

#first {
  transform: translateX(20vw);
  display: inline-block;
}
#second {
  transform: translateX(30vw);
  display: inline-block;
}

<p id="first">Here's first P</p>
<br/>
<p id="second">Here's second P</p>

browser prefixing 为简单起见已删除。

在这种情况下，我使用了 vw 单位，因为我的 parent 是 'body'（其宽度是屏幕的 100%）。所以在这种情况下 1vw = 1%。

CSS 替换文本对齐百分比

CSS replacement for text-align in percentage

html

css

text-align