Bri*_*unt 194 html css xhtml line vertical-alignment
我想知道在xhtml 1.0 strict中有什么选项可以在文本的两边创建一条线 - 所以:
Section one ----------------------- Next section ----------------------- Section two
我想过做一些像这样的奇特事情:
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
或者,因为上面的对齐问题(垂直和水平):
<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>
这也有对齐问题,我解决这个问题:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
除了对齐问题之外,这两个选项都感觉"有点",如果你以前碰巧看过这个问题并且知道一个优雅的解决方案,我会非常感激.
Fle*_*ore 211
怎么样:
<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
<span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
Section Title <!--Padding is optional-->
</span>
</div>看看这个JSFiddle.
您可以使用vw或%使其响应.
Mar*_*inF 190
在不知道宽度和背景颜色的情况下解决此问题的方法如下:
结构体
<div class="strike">
<span>Kringle</span>
</div>
CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
margin-right: 15px;
}
.strike > span:after {
left: 100%;
margin-left: 15px;
}
双线
要创建双线,请使用以下选项之一:
1)固定行间距
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 4px double red;
示例:http://jsfiddle.net/z8Hnz/103/
2)线之间的自定义空间
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 5px; /* space between lines */
margin-top: -2px; /* adjust vertical align */
border-top: 1px solid red;
border-bottom: 1px solid red;
}
示例:http://jsfiddle.net/z8Hnz/105/
SASS(SCSS)版本
基于这个解决方案,我添加了SCSS"有颜色属性",如果它可以帮助某人......
//mixins.scss
@mixin bg-strike($color) {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
> span {
position: relative;
display: inline-block;
&:before,
&:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: $color;
}
&:before {
right: 100%;
margin-right: 15px;
}
&:after {
left: 100%;
margin-left: 15px;
}
}
}
使用示例:
//content.scss
h2 {
@include bg-strike($col1);
color: $col1;
}
小智 77
您可以使用:: before和:: after来完成此操作,而无需知道容器或背景颜色的宽度,并实现换行符的更大样式.例如,可以修改它以制作双线,虚线等.
CSS和HTML用法:
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
color: rgba(0, 0, 0, 0.35);
margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
content: "";
flex-grow: 1;
background: rgba(0, 0, 0, 0.35);
height: 1px;
font-size: 0px;
line-height: 0px;
margin: 0px 8px;
}<div class="hr-sect">CATEGORY</div>Dio*_*ane 51
试试这个:
.divider {
width:500px;
text-align:center;
}
.divider hr {
margin-left:auto;
margin-right:auto;
width:40%;
}
.left {
float:left;
}
.right {
float:right;
}<div class="divider">
<hr class="left"/>TEXT<hr class="right" />
</div>在jsFiddle上实时预览.
Mat*_*Cat 25
我不知道这是否已被弄清楚但是flexbox提供了相当多的解决方案:
<div class="separator">Next section</div>
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before, .separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.separator::before {
margin-right: .25em;
}
.separator::after {
margin-left: .25em;
}
有关演示,请参见http://jsfiddle.net/MatTheCat/Laut6zyc/.
今天,兼容性并不是那么糟糕(你可以添加所有旧的flexbox语法),它会优雅地降级.
Rob*_*jic 21
我刚遇到同样的问题,这是一种解决方法:
<table width="100%">
<tr>
<td><hr /></td>
<td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
<td><hr /></td>
</tr>
</table>?
它无需在文本元素上设置背景即可工作,即无论背后是什么背景,它都会很好看.
你可以在这里试试:http://jsfiddle.net/88vgS/
wil*_*ler 10
更新:使用HTML5无效
相反,请查看此问题以获取更多技巧:CSS挑战,我可以在不引入更多HTML的情况下执行此操作吗？
我曾经line-height:0在我的网站guerilla-alumnus.com的标题中创建效果
<div class="description">
<span>Text</span>
</div>
.description {
border-top:1px dotted #AAAAAA;
}
.description span {
background:white none repeat scroll 0 0;
line-height:0;
padding:0.1em 1.5em;
position:relative;
}
另一个好方法是http://robots.thoughtbot.com/
他使用背景图像和浮动来实现很酷的效果
如果您可以使用CSS并且愿意使用deprecated align属性,则样式化的字段集/图例将起作用:
<style type="text/css">
fieldset {
border-width: 1px 0 0 0;
}
</style>
<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>
<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>
字段集的预期用途是对表单字段进行逻辑分组.正如威勒指出的那样,一种text-align: center风格不适用于legend元素. align="center"不推荐使用HTML,但它应该在所有浏览器中正确居中.
这是一个仅使用 css 的简单解决方案，没有背景技巧......
.center-separator {
display: flex;
line-height: 1em;
color: gray;
}
.center-separator::before, .center-separator::after {
content: '';
display: inline-block;
flex-grow: 1;
margin-top: 0.5em;
background: gray;
height: 1px;
margin-right: 10px;
margin-left: 10px;
}
HTML：
<div class="center-separator">
centered text
</div>
小提琴示例：https : //jsfiddle.net/0Lkj6wd3/
对于 Bootstrap 4，这似乎对我有用：
<div class="row">
<div class="col"><hr/></div>
<div class="col-auto">Or</div>
<div class="col"><hr/></div>
</div><div style="text-align: center; border-top: 1px solid black">
<div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>
您可以只使用位置相对并在父级上设置高度
.fake-legend {
height: 15px;
width:100%;
border-bottom: solid 2px #000;
text-align: center;
margin: 2em 0;
}
.fake-legend span {
background: #fff;
position: relative;
top: 0;
padding: 0 20px;
line-height:30px;
}<p class="fake-legend"><span>Or</span>
</p>引导网格：
HTML：
<div class="row vertical-center">
<div class="col-xs-5"><hr></div>
<div class="col-xs-2" style="color: white"> Text</div>
<div class="col-xs-5"><hr></div>
</div>
CSS：
.vertical-center{
display: flex;
align-items: center;
}