居中绝对位置的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？

回答

相关问题