减小div容器的大小

Question

您好我想知道如何让我的div容器在高度上变小但保持文本居中？这是下面的图像。

我的css到目前为止这个div是，

.contactdet {
background: rgba(255,255,255,0.1); // transparent white
    background: #fff; // Left as a fallback for older browsers
    color: #FFFFFF;
  vertical-align: middle;
}

http://www.webbmaster.com.au/web-programs/questdesign/index.php/contact

Answer 1

Firstable清洁您的容器。删除<p>&nbsp;</p>内的<div class="custom contactdet"> 之后，只需在您的班级中添加“身高”和line-height：

.contactdet {
background: rgba(255,255,255,0.1); // transparent white
    background: #fff; // Left as a fallback for older browsers
    color: #FFFFFF;
    vertical-align: middle; 
    height:35px;
    line-height:35px
}

Answer 2

对于初学者，您可以删除文本上方和下方的空白段落。如果检查元素，您将看到以下内容：

<div class="custom contactdet">
  <p> </p>
  <p style="text-align: center;">
    <span style="font-size: medium;">contact@questdesign.com.au ● (03) 9014 4882 ● 0413 859 064</span>
  </p>
  <p> </p>
</div>

您有2个<p>个标签，但没有任何内容。

删除后，您可以像这样添加一个小填充：

.custom.contactdet > p {
    padding: 5px 0;
}

Answer 3

您需要添加height属性

.contactdet {
    background: rgba(255,255,255,0.1); // transparent white
    background: #fff; // Left as a fallback for older browsers
    color: #FFFFFF;
    vertical-align: middle;
    height:30px; /* Change this to the height you want*/
}