Question

我在以下帖子CSS technique for a horizontal line with words in the middle

中找到了这个小提琴

无论如何限制宽度？我尝试过将.max，.item和.line放入max-width或just width属性。但它都不起作用。我知道在显示器上放置宽度是有限制的：table-cell。

我在该论坛上尝试过其他解决方法;但是他们不能使用bootstrap。我需要它来使用bootstrap，我需要背景是透明的（因为它在图像上）。请参阅以下代码：

CSS：

.group { 
  display: table;
  width: 100%;
  font-size: 3em;
}
.item {
  display: table-cell;
}
.text { 
  white-space: nowrap;
  width: 1%;
  padding: 0 10px;
}
.line {
  border-bottom: 1px solid #000;
  position: relative;
  top: -.5em;
}

HTML：

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

Answer 1

我做了一个小提琴，显示了一个简单的方法。如果您想要更短的线条，只需调整padding，如果您希望线条的宽度减少，您可以减少width并设置left属性100%减去width除以2.因此，如果宽度为80%，请将left属性设置为left: 10%;。希望它有意义。

http://jsfiddle.net/yr9dg30b/1/

<div>
    <hr>
    <h1>This is text</h1>
</div>

div {
    position: relative;
    text-align: center;
}

h1 {
    margin: 0;
    background-color: white;
    z-index: 1000;
    display: inline-block;
    margin: 0 auto;
    padding: 50px;
}

hr {
    position: absolute;
    top: 50%;
    left: 10%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 80%;
    margin: 0;
    z-index: -1000;
}

Answer 2

您可以保留提供的css并使用组中的width属性，但必须使用margin: 0 auto;

将其重新对齐到中心

.group { 
    display: table;
    width: 50%;
    font-size: 3em;
    margin: 0 auto;
} 
.item {
    display: table-cell;
}
.text { 
    white-space: nowrap;
    width: 1%;
    padding: 0 10px;
}
.line {
    border-bottom: 1px solid #000;
    position: relative;
    top: -.5em;
}

用Bootstrap中间的单词创建水平线

2 个答案: