我在這個CSS中做錯了什麼？

-3

在下面的圖片請大家看看申請表（綠色背景中），它在頂部對齊，而不是我需要對齊垂直居中我在這個CSS中做錯了什麼？

CSS樣式中使用，

.rtitle { 
background-color: Green; 
width: 300px; 
height: 50px; 
border-radius: 25px; 
font-size: 30px; 
padding-right: 10px; 
padding-left: 10px; 
text-align: center; 
font-weight: bold; 
}

我需要一個完全居中的div風格使用CSS請幫助。

來源

2017-03-28 Philip

你應該提供HTML了。當你不知道標記是什麼樣的時候很難調試。 – sweaver2112

請首先閱讀[問]。 – CBroe

[博客]：訪問：http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers?page=1&tab=votes#tab-top「有一個很好的在這裏回答:)「 –

當我在按鈕上使用樣式時，它位於中心。這可能是一些其他的造型，你有這樣做。或者在你的html中。

.rtitle { 
 
background-color: Green; 
 
width: 300px; 
 
height: 50px; 
 
border-radius: 25px; 
 
font-size: 30px; 
 
padding-right: 10px; 
 
padding-left: 10px; 
 
text-align: center; 
 
font-weight: bold; 
 
}

<button class="rtitle">Hello</button>

來源

2017-03-28 14:49:30 Naomi

您可以使用一些padding並減小height的大小，以使其完全位於中間。如下圖所示：

.rtitle { 
 
background-color: Green; 
 
width: 300px; 
 
height: 45px; 
 
border-radius: 25px; 
 
font-size: 30px; 
 
padding-top: 5px; 
 
text-align: center; 
 
font-weight: bold; 
 
}

<button class="rtitle">REQUEST FORM</button>

來源

2017-03-28 14:48:43 MaMadLord

非常感謝。這工作正常。 – Philip

最簡單的辦法來解決，這是在您的樣式添加填充頂。

來源

2017-03-28 14:48:56

Thx。是的填充頂部和填充底部線條正常工作。 – Philip

添加在你的CSS樣式如下：

button p { 
margin: auto 
}

，並刪除

text-algin:center

加上.rtitle風格填充，並添加<p> </p>之間的文本標籤。

來源

2017-03-28 14:53:31

答案很簡單，height添加line-height等於類：

.rtitle { 
 
    background-color: Green; 
 
    width: 300px; 
 
    height: 50px; 
 
    border-radius: 25px; 
 
    font-size: 30px; 
 
    padding-right: 10px; 
 
    padding-left: 10px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    
 
    line-height: 50px; /* ADD */ 
 
}