Question

我一直在尝试，我真的不知道如何解决这个问题：
我需要像这样设计内容的标题：现在，我一直在尝试position:absolute其他一些东西，但它似乎不起作用。 enter image description here

我的代码：

 <div class="content_item">
      <div class="double_line"></div>
      <h2>Ce facem</h2>
 </div>

的CSS：

.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: absolute;
}
.content_item>h2{
    text-align: center;
    background-color: #ffffff;
}

所以我想要的是将文字放在线上，文字上有白色背景。小提琴：http://jsfiddle.net/Qu849/

你能帮帮我吗？

Answer 1

这个小提琴有点工作： http://jsfiddle.net/Qu849/4/

无论如何，我不会为此目的而做那个代码。考虑一下：只需使用带有background image（repeat-x）的div和那些“border”

在div内部使用span，居中并使用background:#fff;

那只是更好。

修改

检查@drip答案以执行我所描述的内容：https://stackoverflow.com/a/20070686/2600397

Answer 2

你需要将你的位置高于你的边界div。我的想法是制作h2 display:inline-block;，这样您就可以使用父级text-align:center;将孩子h2居中，然后在h2上使用position:relative;和top:-20px;来移动它一点点

.content_item{    
    border-top: 2px solid #c2c1c1;
    border-bottom: 2px solid #a5a4a4;    
    width:100%;
    height:5px;
    position:relative; 
    text-align:center;
    margin-top:50px;   
 }
.content_item > h2{
        text-align: center;
        background-color: white;
        padding:3px 15px;
        font-size:14px;        
        display:inline-block;
        position:relative;
        top:-20px;
 }

http://jsfiddle.net/Qu849/8/

Answer 3

由于double_line div绝对定位，它将位于任何无定位元素之上。

要将两个元素放在相对平面上，您需要以相同的方式（绝对或相对）定位h2。

之后，您可以使用元素的边距或顶部/左侧属性来将它们放在彼此之上。

Answer 4

你可以很容易地使用背景图像。

如果你可以使用背景图片。

HTML：

<h2><span>Ce facem</span></h2>

CSS：

h2 { 
    background: url(http://i.imgur.com/7LGlQ0I.png) repeat-x 0 center; 
    text-align: center;
}
h2 span { padding: 0 20px; background-color: #fff; }

Demo

或者，如果你真的更喜欢我们的边界元素：

然后在css中进行一些调整：

 .content_item>div{
    border-top: 2px solid #c2c1c1;
    border-bottom: 2px solid #a5a4a4;
    width:100%;
    height:5px;
    position: absolute;
    top: 12px;
    }
.content_item>h2{
        display: inline;
        position: relative;
        z-index: 2;
        text-align: center;
        padding: 0 10px;
        background-color: #ffffff;
    }
.content_item{
    text-align: center;
     position:relative;   
}

Demo

Answer 5

是的，罗迪克是对的

尝试使用：

.content_item>h2 {
text-align: center;
display: block;
width: 200px;
background-color: #ffffff;
margin-top: -20px;
margin-left: 30%;}

Answer 6

您必须向position:absolute;

提供margin和<h2>

将<h2>样式替换为：

.content_item>h2{
        text-align: center;
        background-color: #ffffff;
    position:absolute;
    margin:-10px 41% 0px;
    }

fiddle

Answer 7

 .content_item>div{
   border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display: inline-block;
width: 100%;
height: 5px;
position: relative;
    }
.content_item>h2{
        background-color: #FFFFFF;
width: 200px;
z-index: 12;
position: absolute;
top: -23px;
text-align: center;
left: 0;
right: 0;
margin: 20px auto;
    }
.content_item{
 position:relative;   
}
}

使用此代码对您有用。请参阅此链接http://jsfiddle.net/bipin_kumar/35T7S/1/

Answer 8

如果有疑问，您可以将文本设置为具有完全透明背景的图像，这使得响应网页布局（不同分辨率等）更容易。

Answer 9

没有图片的纯Css

在你的CSS中修改它以检查它是否有帮助：

.content_item>h2{
        text-align: center;
        background-color: #ffffff;
        display:inline-block;  // makes header size equal to text width
        width : 30%;   //gives indented left-right white-space
        position:absolute; //to overlay it on double-line
        top : 0px; //position
        display: table;  //centre inline elements
        margin : 0 auto;
        margin-left : 40% //hack to center it
    }

Answer 10

尝试这种，另一种方式

        .content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: relative;
}

 .content_item>h2{
    text-align: center;
    background-color: #ffffff;
    position:absolute;
    margin-top:-30px;
    margin-left:50%;
   }

当z-index未使用此类问题时，请使用以上格式。

Answer 11

这是一种方法：

.content_item {
    position:relative;
}
.content_item > div {
    border-top: 2px solid #c2c1c1;
    border-bottom: 2px solid #a5a4a4;
    XXdisplay:inline-block; /* not needed */
    width:100%;
    height:5px;
    position: absolute;
    z-index: -1;
    top: 50%;
    margin-top: -3px;
}
.content_item > h2 {
    text-align: center;
    background-color: #ffffff;
    width: 200px; /* must be specified */
    margin: 0 auto; /* for centering */
}

要.double-line div，请添加z-index: -1以强制它在h2元素下绘制。使用top: 50%和否定margin-top: -3px垂直对齐双线（如果这是你需要的）。

然后你需要指定h2的宽度，否则它将是100％宽，白色背景将在dobule线上绘制。添加margin: 0 auto以将h2置于父容器中心。

display: inline-block您不需要.double-line，因为绝对定位会强制显示类型为block。

演示于：http://jsfiddle.net/audetwebdesign/nB2a3/

Answer 12

您可以在没有绝对定位且无需更改HTML的情况下执行此操作。

您可以在text-align: center上设置<h2>，而不是.content-item上的display: inline-block。然后在<h2>上使用.content_item>div { border-top: 2px solid #c2c1c1; border-bottom: 2px solid #a5a4a4; width:100%; height:5px; } .content_item>h2 { background-color: #ffffff; display: inline-block; margin: 0; padding: 0 40px; position: relative; top: -15px; } .content_item { text-align: center; }，并使用负顶值相对定位。

像这样：

{{1}}

http://jsfiddle.net/Qu849/11/

把div放在文本的顶部

12 个答案: