對齊HTML/CSS

Question

我想讓我的文本對齊。我有一個<p>，我的文本從網頁瀏覽器/屏幕左側直到右側。但我希望它遠離屏幕的左右兩端。我知道對齊碼「中心，右邊，左邊等」。我需要它左對齊，但不是在屏幕旁邊，就像整個<p>在兩側都縮進一樣。

Answer 1

您可以簡單地添加一些填充，margin-left/margin-right或其他解決方案。

嘗試添加;

text-align: left; 
margin-left: 5%; 

到您的CSS。

您可以將margin-left值更改爲像素數量（例如50px;）或將其保留爲其父元素的百分比。

你說你想讓文本左對齊，但不要觸摸頁面的左側。這裏是一個一個的jsfiddle：

https://jsfiddle.net/zfvhgr0x/

Answer 2

你會想要麼把它含有專區內，或應用填充到<p>標籤。它應該是這樣的：

.container { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
}

<div class="container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p> 
 
</div>

OR

<p style="padding:0 50px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel sem ultrices, pellentesque risus sit amet, scelerisque sem. Mauris ut mauris a libero dictum viverra. Ut eros metus, tristique et porta quis, tincidunt quis lacus. Suspendisse potenti. Sed sit amet nisi nec urna tincidunt malesuada. Nulla blandit feugiat dolor, a luctus dolor interdum ut. Quisque laoreet leo tristique, vestibulum enim eget, imperdiet sem.</p>

Answer 3

你可以做到這一點簡單地通過保持width屬性爲是，只是包括以下進入你的CSS：

padding: 0 5px; 

這會在文本左側和文本右側添加5個像素的空間。這意味着如果你的文字會到達屏幕的末端，它會在結束之前停止5個像素。

您可以單獨設置每個縮進，解釋如下：

padding: 5px(top) 7px(right) 2px(bottom) 10px(left) 

把這個代碼時，你不想括號。這些僅僅是爲了演示目的來解釋每個數字的目標。

希望有幫助！