你好，我想知道如何讓我的div容器的高度更小，但保持文本居中？下面是它的一個圖像。減小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
對於初學者來說，你可以刪除t之上和之下的空白段落分機。如果你檢查的元素，你會看到以下內容：
<div class="custom contactdet">
<p> </p>
<p style="text-align: center;">
<span style="font-size: medium;">[email protected] ● (03) 9014 4882 ● 0413 859 064</span>
</p>
<p> </p>
</div>
你有2個<p>標籤與他們沒有任何內容。
一旦取消，您可以添加一個小填充像這樣：
.custom.contactdet > p {
padding: 5px 0;
}
您需要添加一個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*/
}
沒有好。當我這樣做時，它與底部的div容器合併。 http://www.webbmaster.com.au/web-programs/questdesign/index.php/contact – 2015-02-11 23:25:37
這種方法的問題是它不是動態的。如果字體大小曾經改變或者添加了更多內容，則高度不會相應地調整，並且必須再次手動改變。 – Lodder 2015-02-11 23:34:53
@Lodder這是真的，但OP要求設置一個高度。如果內容填滿，則添加填充可能會導致較高的頁腳。 OP沒有提到動態的需要。當然，使用填充而不是固定高度更好。 – 2015-02-11 23:38:01
Firstable清潔你的容器。刪除這兩個<p> </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
}
完成了。非常感謝。 – 2015-02-11 23:32:35
@EndôFujimoto - 不客氣;） – Lodder 2015-02-11 23:33:43