减小 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

您需要添加一个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*/
}

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

首先清洁你的容器。删除 <div class="custom contactdet"> 内的两个 <p> </p> 之后只需将 'height' 和 line-height 添加到您的 class:

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

减小 div 容器的大小

Reducing the size of a div container

html

css

joomla