Css 图像标题前后的行_Css_Css Shapes

Css 图像标题前后的行

css

Css 图像标题前后的行,css,css-shapes,Css,Css Shapes,我想在居中标题前后创建一行。线条和文本必须具有透明背景，才能在不均匀的背景上定位。线的宽度不能为100%，如下所示：标题的文本可以更改：标题的宽度未知标题可以跨越几行 h1{ 文本对齐：居中；边框底部：1px实心#000； } 今天您可以在标题的两侧画一条带有两个伪元素和边框的线：这适用于透明背景（线条和标题具有透明背景）行长将适应标题宽度，因此无论标题长度如何，它们始终在同一位置开始和结束标题可以跨越多行，而左行和右行保持垂直居中（请注意，您需要将标题包装在标记中才能使

我想在居中标题前后创建一行。线条和文本必须具有透明背景，才能在不均匀的背景上定位。线的宽度不能为100%，如下所示：

标题的文本可以更改：

标题的宽度未知
标题可以跨越几行

h1{
文本对齐：居中；
边框底部：1px实心#000；
}

今天

您可以在标题的两侧画一条带有两个伪元素和边框的线：

这适用于透明背景（线条和标题具有透明背景）
行长将适应标题宽度，因此无论标题长度如何，它们始终在同一位置开始和结束
标题可以跨越多行，而左行和右行保持垂直居中（请注意，您需要将标题包装在
标记中才能使用。请参阅演示）

@导入url(http://fonts.googleapis.com/css?family=Open+Sans:300）；
身体{
背景图片：url(http://i.imgur.com/EzOh4DX.jpg);
背景重复：无重复；
背景尺寸：100%自动；
字体系列：“开放式Sans”，无衬线；
}
h1{
宽度：70%；
保证金：.7em自动；
溢出：隐藏；
文本对齐：居中；
字体大小：300；
颜色：#fff；
}
h1:之前，h1:之后{
内容：“；
显示：内联块；
宽度：50%；
利润率：0.5EM0-55%；
垂直对齐：中间对齐；
边框底部：1px实心；
}
h1：之后{
利润率：0-55%0.5em；
}
跨度{
显示：内联块；
垂直对齐：中间对齐；
}

今天
今日新闻
今天的
新闻

你可以在标题的两边画一条带有两个伪元素和边框的线：

这适用于透明背景（线条和标题具有透明背景）
行长将适应标题宽度，因此无论标题长度如何，它们始终在同一位置开始和结束
标题可以跨越多行，而左行和右行保持垂直居中（请注意，您需要将标题包装在
标记中才能使用。请参阅演示）

@导入url(http://fonts.googleapis.com/css?family=Open+Sans:300）；
身体{
背景图片：url(http://i.imgur.com/EzOh4DX.jpg);
背景重复：无重复；
背景尺寸：100%自动；
字体系列：“开放式Sans”，无衬线；
}
h1{
宽度：70%；
保证金：.7em自动；
溢出：隐藏；
文本对齐：居中；
字体大小：300；
颜色：#fff；
}
h1:之前，h1:之后{
内容：“；
显示：内联块；
宽度：50%；
利润率：0.5EM0-55%；
垂直对齐：中间对齐；
边框底部：1px实心；
}
h1：之后{
利润率：0-55%0.5em；
}
跨度{
显示：内联块；
垂直对齐：中间对齐；
}

今天
今日新闻
今天的
新闻

这里是使用flexbox显示的另一种方法。

flex grow

属性指定当元素的总大小小于容器大小时，应如何在元素之间分配可用空间

默认情况下，在生成行的元素上没有指定

宽度

，并且它们没有

内容

（这意味着它们基本上是空的，不占用空间）。但是，这些元素上的

flex grow

设置将使剩余空间（容器的总空间-文本的空间）在它们之间平均分布。这使它看起来像是从一端到另一端，除了文本所在的位置

内容两侧的实线：

在下面的代码片段中，使用从上到下的渐变来产生在内容的任意一侧都有实线的效果

h3{
显示器：flex；
弹性：1；
宽度：70%；
保证金：20px自动；
线高：1米；
}
.标题：之前，.标题：之后，
.标题ie span.after..标题ie span.before{
内容：''；
柔性生长：1；
利润率：0px 4px；
背景：线性渐变（向右，白色，白色）；
背景尺寸：100%2px；
背景位置：0%50%；
背景重复：重复-x；
}
/*只是为了演示*/
身体{
背景图像：径向梯度（圆形，#3F9CBA 0%，#153346 100%）；
}


更广泛的东西
越来越宽的东西
更宽的
并跨越多条
线
越来越广泛的东西