顯示錶格單元寬度不能正常工作

除非我以像素爲單位使用寬度 - 我無法讓<p>元素的寬度與其父母相同。顯示錶格單元寬度不能正常工作

例如HTML

<body> 
    <div class="some-class"> 
    <div> 
     <p>Some text</p> 
    </div> 
    </div> 
</body>

CSS：

.some-class{ 
    position:relative; 
    margin-top:2vmin; 
    width:24vw; 
    height:24vw; 
    background:rgb(0,0,0); 
} 

.some-class div{ 
    position:absolute; 
    z-index: 6; 
    width:24vw; 
    height:24vw; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    background:rgba(255, 255, 255, 0.2); 
} 

.some-class div p{ 
    display:table-cell; 
    width:24vw; 
    height:24vw; 
    vertical-align:middle; 
    text-align:center; 
}

的基本思想是<div>內已居中的文本。如果我溝通<p>並將文本留在<div>（通過設置display:table-cell），但是水平居中不起作用，但是垂直居中不起作用。如果我喜歡在我提供的jsfiddle中，那麼<p>元素的寬度不足以實現水平居中。

任何想法？

來源

2014-03-25 Ežiukas Stebintis Pasaulį

小姐display在.some-class div

.some-class div { 
    display: table; 
}

來源

2014-03-25 11:40:35 KoernerWS

http://jsfiddle.net/sYEAn/5/ –

已經嘗試過。現在再試一次。不工作，也不在jsfiddle中，也不在實際情況下。 –

@JitendraPancholi謝謝 - 這工作！一直在嘗試錯誤的父母。我怎樣才能接受你的答案？ –

您可以嘗試

.some-class div p { 
    display: block; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    line-height: 24vw; 
    margin: 0px; 
}

但不會是的pritty如果你有更多然後1行文字

第二個解決方案：

.some-class div p{ 
    position: absolute; 
    display:block; 
    width: 100%; 
    height: 20px; 
    top:50%; 
    margin-top: -10px; 
    text-align:center; 
}

這樣會更好，當你有線wrraping，但它不會正確居中多於2行

來源

2014-03-25 11:53:43 Zivko

第二種解決方案將在50％ - 10px的頂部位置沒有metter你有多少行，但至少所有行將在框內。 – Zivko

顯示錶格單元寬度不能正常工作

回答

相關問題