CSS替換百分比的text-align

粘在這裏講的這個問題本身：是否有CSS3是alows放置像<p>或任何<h$>像text-align但以百分比的一些元素的任何財產。CSS替換百分比的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這樣的屬性，但對於上面介紹的這些元素？

來源

2015-04-20 Vad Zelenin

我不清楚你想在這裏實現什麼。請解釋一下你給出的例子不起作用。 – isherwood

你能澄清你的問題嗎？你是問如何縮小元素中的文本的百分比數量或如何將元素本身集中在父元素中？ – Shaggy

如果要水平居中，請使用「text-align」（內聯或內嵌塊元素）或「margin：0 auto;'（塊元素）。你可以做一些計算（margin-left =（容器寬度 - 元素寬度）/ 2），但這將是不必要的開銷... –

嘗試：

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

來源

2015-04-20 13:04:09 Ciprian

您可以使用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

來源

2015-04-20 13:04:59

爲什麼30％？只是一個隨機數字？ –

只是一個隨機值。 –

您可以使用text-ident ident命令文本

Link

來源

2015-04-20 13:05:01

你可以使用轉換屬性（使用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單位，因爲我的父母是'body'（whos寬度是屏幕的100％）。所以在這種情況下1vw = 1％。

來源

2015-04-20 13:11:28 jbutler483

CSS替換百分比的text-align

回答

相關問題