使用CSS垂直對齊容器內的文本

我很新來CSS，我試圖垂直對齊：中間一些div內的文本。這已經被問過了，但我不能得到任何解決方案爲我工作，所以我必須錯過一些明顯的東西。使用CSS垂直對齊容器內的文本

我已經試過：

在一間<p>標籤和CSS添加vertical-align: middle;到<p>標籤的文本。

將文本放在<p>標記中，並在CSS中將vertical-align: middle;添加到父div。

具有文本在<div class="flex-container">和CSS添加

.flex-container { 
display: flex; 
justify-content: center; 
align-items: center; 
}

如這裏：https://jsfiddle.net/dt3kvmdm/

父DIV沒有在像素修復的高度。相反，這是一個百分比。一個類似問題的解決方案表明這可能是一個問題，但我不清楚它。能夠保持百分比對我有幫助。

我會很樂意聽到任何建議！

非常感謝！

Nick。

來源

2016-08-23 Runny Yolk

的[垂直對齊一個div文本]可能的複製（http://stackoverflow.com/questions/2939914/vertically-align-text-in- a-div） – Paul

您需要的父元素上使用display: flex或設置height: 100%子元素Fiddle

.ProjectTitle { 
 
    background-color: green; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 20%; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.flex-container { 
 
    font-family: "Taviraj", serif; 
 
    color: #000; 
 
    letter-spacing: 0.11em; 
 
}

<div class="ProjectTitle"> 
 
    <div class="flex-container"> 
 
    Project Title 
 
    </div> 
 
</div>

來源

2016-08-23 21:58:03

我不知道如果我完全理解你想要什麼，但看這有助於：

HTML：

<div class="ProjectTitle"> 
    <div class="flex-container"> 
     <p>Project Title</p> 
    </div> 
</div>

CSS：

.ProjectTitle { 
    background-color: green; 
    position: absolute; 
    width: 100%; 
    height: 20%; 
    bottom: 0; 
} 

.flex-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: "Taviraj", serif; 
    color: #000; 
    letter-spacing: 0.11em; 
    line-height: 20%; 
    height: 100%; 
} 

.flex-container p { 
    color: #ffffff; 
    vertical-align: middle; 
}

小提琴：https://jsfiddle.net/dt3kvmdm/1/

來源

2016-08-23 21:58:59 Quiver

是的！謝謝你，這正是我想要做的。 –

使用CSS垂直對齊容器內的文本

回答

相關問題