我在这个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 */ 
 
}