我在这个CSS中做错了什么？

Question

在下面的图片中，请查看请求表格（绿色背景内），它在顶部对齐，而不是我需要在垂直居中对齐

使用的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，请帮忙。

Answer 1

您可以使用一些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>

Answer 2

解决这个问题的简单方法是在你的风格中添加一个填充顶部。

Answer 3

当我在按钮上使用您的样式时，它位于中心。它可能是你做的其他一些造型。或者你的HTML中的东西。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

在CSS样式中添加以下内容：

button p {
margin: auto
}

并删除

text-algin:center

加上.rtitle样式的填充，并在<p> </p>标记之间添加文字。

Answer 5

答案很简单，在您的班级中添加n等于n：

＆＃13;

＆＃13;

line-height

＆＃13;

height

＆＃13;

＆＃13;

＆＃13;

适用于任何字体的所有时间（除非您使用.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 */ }进行干预）

Answer 6

您需要将文本放入范围

然后在跨度使用

.span {top: 50%; position: relative; }

https://jsfiddle.net/zt31ra3k/