居中絕對位置的div？

我想知道如何能夠中心這個div。居中絕對位置的div？

我嘗試添加自動保證金，但它不會居中在屏幕上。我也希望它是響應。我不想添加固定的寬度，因爲我希望邊框的頂部/底部線條與單詞的長度相匹配。另外，有沒有辦法讓頂線和底線加倍？

.name { 
    font-family: 'PT Sans', sans-serif; 
    font-size: 80px; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2015-05-15 Ave

更好的解決方案可以呈現給定的自身多一點上下文。這在網頁上出現在哪裏？爲什麼它需要'位置：絕對'？你想要完成的是什麼？ – showdev

.wrapper { 
    position: fixed; 
    top: 30px; 
    left: 0px; 
    width: 100%; 
    text-align: center; 
} 

.name { 
    font-family: 'PT Sans', sans-serif; 
    font-size: 80px; 
    border-top: 1px solid black; 
    border-bottom: 1px solid black; 
    display: inline-block;  
}

https://jsfiddle.net/eLjy45zq/2/

創建包裝和使用display: inline-block;得到線工作，你怎麼想他們。

（補充的位置是：固定到包裝，根據需要更改）

來源

2015-05-15 00:52:53

但邊界線跨越整個屏幕，而我想要它匹配文本的長度 – Ave

-1

在這裏你去這個使用position:fixed;就像你的榜樣&還將與position:absolute;工作。

當使用這些元素和居中您使用left:0px;和right:0px;並設置您的margin:0;。

fiddle

.name { 
 
    font-family: 'PT Sans', sans-serif; 
 
    font-size: 80px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    position: fixed; 
 
    margin: 0 auto; 
 
    left: 0px; 
 
    right: 0px; 
 
    width: 500px; 
 
    text-align: center; 
 
}

<div class="name">Lorem Ipsum</div>

來源

2015-05-15 01:02:39 DCdaz

爲什麼這被拒絕？ – DCdaz

它不回答問題。 –

居中絕對位置的div？

回答

相關問題