垂直和水平居中文本沒有絕對定位

首先，它不同於其他問題，因爲我不能使用position: absolute;，因爲我通常使用的是因爲我的jQuery插件（我在示例中沒有使用這個插件，但我必須對內部表做position: relative;）。垂直和水平居中文本沒有絕對定位

的jsfiddle：https://jsfiddle.net/h8ywumbk/

HTML：

<div id="table"> 
    <div id="inside-table" > 
    <span>Hello</span> 
    </div> 
</div>

CSS：

#table { 
    width: 100%; 
    height: 100px; 
    border: solid 1px black; 
    background-color: transparent; 
} 
#inside-table { 
    position: relative; 
    width: 98%; 
    height: 80px; 
    background-color: transparent; 
    border: solid 1px black; 
    margin: 0 auto; 
    margin-top: 10px; 
} 
#inside-table span { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

我試圖居中文本（不是單行線）垂直並水平放在桌子上。有什麼建議麼？

來源

2016-01-27 Web R

http://stackoverflow.com/a/33049198/3597276 –

只需使用flexbox

#table { 
 
    width: 100%; 
 
    height: 100px; 
 
    border: solid 1px black; 
 
    background-color: transparent; 
 
} 
 
#inside-table { 
 
    position: relative; 
 
    width: 98%; 
 
    height: 80px; 
 
    background-color: transparent; 
 
    border: solid 1px black; 
 
    margin: 0 auto; 
 
    margin-top: 10px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#inside-table span { 
 
    
 
}

<div id="table"> 
 
    <div id="inside-table"> 
 
    <span>Hello</span> 
 
    </div> 
 
</div>

來源

2016-01-27 22:12:19

嗨，謝謝。我使用WEBMATRIX，它顯示我要顯示的錯誤消息：flex和接下來的兩行... –

嗯..我不知道它是什麼，但它應該感到羞愧，它不知道flexbox :) –

它仍然顯示消息，但不知何故它將文本居中在我的網站上，儘管它。謝謝先生 –

試試這個：

.table { 
    display: table; 
    width: 100%; 
} 
.td { 
    display: table-cell; 
    vertical-align: middle; 
} 

<div class="table"> 
    <div class="td"> 
    text 
    </div> 
    <div class="td"> 
    <img alt="" src="http://url style="width: 120px; height: 148px;" /> 
    </div> 
</div>

來源

2016-01-27 22:14:16

我得到了它的中心是這樣的：

#inside-table span { 
    position: relative; 
    top: 50%; 
    left: 50%; 
}

如果你希望它向一個方向或另一個方向移動，你總是可以弄亂百分比

來源

2016-01-27 22:19:02 cfatt10

垂直和水平居中文本沒有絕對定位

回答

相關問題