垂直排列文本

-3

我有一個h3高度爲100%。因此高度是未知的。我怎樣才能將文本集中在自己內部？爲了舉例，我給出了父級的固定維度，但事實並非如此。我曾嘗試使用垂直對齊，但這不起作用，我相信我可能需要更改display來做到這一點？垂直排列文本

我不想將文本居中在其父文件中，我知道各種方法來做到這一點。我想知道它是否可以垂直居中。文本需要在兩個維度都是100％，以便鏈接填充父div。

.unknowndimensions{ 
 
    height:300px; 
 
    width:300px; 
 
    } 
 
.unknowndimensions h3{ 
 
    height:100%; 
 
    width:100%; 
 
    background:#f7f700; 
 
    text-align:center; 
 
    }

<div class="unknowndimensions"> 
 
    <a href="#"><h3>Title</h3></a> 
 
</div>

來源

2016-09-14 Buts

看看這個：https://css-tricks.com/centering-css-complete-guide/ –

@HaydenSchiff這是一個很好的資源，我經常使用它，但它使用的方法在這個例子中不起作用。 – Buts

@misterManSam不，這不是同一個問題。這不是div內的文字。解決方案將完全不同。 – Buts

使用表的方法，

.unknowndimensions{ 
 
    height:300px; 
 
    width:300px; 
 
    } 
 
.unknowndimensions a{ 
 
    display:table; 
 
    width:100%; 
 
height:100%; 
 
    } 
 
.unknowndimensions h3{ 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    background:#f7f700; 
 
    text-align:center; 
 
    }

<div class="unknowndimensions"> 
 
    <a href="#"><h3>Title</h3></a> 
 
</div>

來源

2016-09-14 03:25:36 link2pk

很酷的答案，我一直在使用哈克空使鏈接填充容器。我確信必須有另一種方式。這個答案符合法案。 – Buts

-2

容易。

line-height: 100%; 
vertical-align: middle;

行高將行的高度設置爲100％，垂直對齊將文本置於中間。

來源

2016-09-14 03:16:06 Gauched

這不適用於片段或我的實際項目。也許行高不可能是100％？ – Buts

嘗試將其設置爲顯示：inline-block;並將其放在父div中，該div也是display：inline-block。保持垂直對齊 – Gauched

行高：100％;只會使行高等於文字大小。即法線高度。 – Buts

垂直排列文本

回答

相關問題