CSS - 在頁面上居中顯示文本並向左對齊

正在設計一個網站，並且有問題讓我的文本居中在頁面上，同時保持其左對齊。我試圖應用這個效果的部分是h3。我錯過了一些顯而易見的東西，但我感到茫然。謝謝！CSS - 在頁面上居中顯示文本並向左對齊

下面是我的代碼：

HTML

<section id="marketing" class="section fp-section" data-anchor="thirdPage"> 
    <img id="marketingLogo" src="images/marketing.png"> 
    <h2 align="center"> Text goes here</h2> 
    <h3 align="center"> Text goes here</h3>

CSS

.fp-section h3{ 
    font-size: 20px; 
    margin-right: auto; 
    margin-left: auto; 
    text-align: left; 
}

來源

2017-03-08 zack83

使用div ...和屬性對齊。頭文件沒有對齊屬性。 – Smit

你的最終目標是什麼？由於文本可以是*左* **或** *中*對齊，但不能同時使用 –

目標是將文本保留在屏幕中間並左對齊。也許一個新的居中的div框中的文本左對齊內部？ – zack83

-1

您可能只需要添加display: block;或display: inline-block;到您的標題。

編輯：雖然說，你問的東西似乎有衝突。如果你想讓它居中但是左對齊，你會如何看到被顯示？

來源

2017-03-08 17:06:55 Monkeybruiser

-1

看起來你的元素上有嵌入式樣式（align =「center」），優先於你的樣式表。

來源：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

來源

2017-03-08 17:12:55

首先，從HTML刪除align: center，首先它最好把你的HTML和CSS分離，第二，因爲你並不需要在那裏。

其次，你需要的CSS設置爲此：

.fp-section h3{ 
    width: 10em; 
    font-size: 1.25em; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: justify; 
}

這工作，因爲你給它一個明確的寬度，因此，當線路過長或類似的東西，它會包裝並且仍然處於中心位置，並且您已經知道margin-left: auto; margin-right: auto;的事情，因此完成並完成了。

此外，旁註：我將字體大小從像素更改爲ems，僅僅是因爲我認爲ems在不同系統中運行得更好。

來源

2017-03-15 18:37:03 chbchb55

CSS - 在頁面上居中顯示文本並向左對齊

回答

相關問題