試圖添加一箇中心標題到我的頁面

我正在尋找添加一箇中心文本標題在我的頁面中間，它不會顯示。代碼似乎是正確的，沒有看到一個錯誤。試圖添加一箇中心標題到我的頁面

<div id="welcome_text_div"> 
    <p id="welcome_text"> Welcome </p> 
</div> 


#welcome_text_div { 
position: absolute; 
background-color:red; 
width:800px; 
height:300px; 
top: 50%; 
margin-top: -150%; 
left: 50%; 
margin-left: -400px; 

} 

#welcome_text { 
color: white; 
font-family: sans-serif; 
text-transform: uppercase; 
font-weight: bold; 
font-size: 55px; 
text-align: center; 

}

來源

2016-02-27 J.M521

謝謝你的快速解答，工作完美！ –

如果有些東西適合你，請選擇一個答案，以便他們可以獲得信貸。 –

你只需要使用文本對齊：中心，它會自動居中。順便說一句，我看到你經常使用id，這是非常糟糕的做法。 ID應該用於javasscript選擇器而class用於CSS。

.center-text { 
 
    text-align:center; 
 
} 
 

 
.title-text { 
 
    // Do css formating here 
 
}

<div class="center-text title-text"> 
 
    <p class="page-title"> Welcome </p> 
 
</div>

來源

2016-02-27 06:08:40

試試這個

#welcome_text_div { 
 
    position: absolute; 
 
    background-color:red; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
    } 
 
    
 
    #welcome_text { 
 
    color: white; 
 
    font-family: sans-serif; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    font-size: 55px; 
 
    text-align: center; 
 
    width: 800px; 
 
    line-height: 300px; 
 
    }

<div id="welcome_text_div"> 
 
     <p id="welcome_text"> Welcome </p> 
 
    </div>

<div id="welcome_text_div"> 
    <p id="welcome_text"> Welcome </p> 
</div> 


#welcome_text_div { 
position: absolute; 
background-color:red; 
top: 50%; 
left: 50%; 
transform: translate(-50%,-50%); 
} 

#welcome_text { 
color: white; 
font-family: sans-serif; 
text-transform: uppercase; 
font-weight: bold; 
font-size: 55px; 
text-align: center; 
width: 800px; 
line-height: 300px; 
}

來源

2016-02-27 04:38:35

您可以Flexbox將實現這一目標。

所有你需要做的容器被限定其寬度和高度（並給它一個背景顏色）：

#welcome_text_div { 
    background-color:red; 
    width:800px; 
    height:300px; 
}

然後加入這三條線來設置Flexbox的顯示上下文，並垂直居中和水平方向：

display:flex; 
align-items:center; 
justify-content:center;

然後刪除內部div的所有額外格式。

#welcome_text_div { 
    background-color:red; 
    width:800px; 
    height:300px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
} 

#welcome_text { 
    color: white; 
    font-family: sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    font-size: 55px; 
}

https://jsfiddle.net/k5zve6bf/

來源

2016-02-27 04:47:28 symlink

試圖添加一箇中心標題到我的頁面

回答

相關問題