замена CSS для выравнивания текста в процентах

Question

Sticky говоря вот сам вопрос: Есть ли какое-либо имущество в CSS3, что Alows разместить некоторые элементы, такие как <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

Try:

#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 для 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, так как мой родитель является «телом» (ширина которого составляет 100% экрана). Таким образом, 1vw = 1% в этом случае.