个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试创建一种效果，其中 h# 元素由元素符号括起来。如果标题跨多行，元素符号应位于文本 block 的左侧和右侧，并垂直居中。
以 HTML5 和 CSS3 为例:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<div class="content-container">
<h1>Short title</h1>
<h1>Really long title that will hopefully span multiple lines to demonstrate the problem I'm trying to solve here</h1>
</div>
</body>
</html>
h1 {
font-weight: bold;
text-align: center;
}
h1:before {
content: '— ';
}
h1:after {
content: ' —';
}
这会渲染元素符号，但是当有换行符时，元素符号最终会用文本本身换行。
如何更改 CSS，使元素符号位于整个文本 block 的左侧或右侧，并垂直居中？这jsFiddle描述的效果比我描述的还要好。请注意，标题元素上方存在一些容器(它们只是不是它的专用容器)也可以使用。
我不想更改 HTML，因为那是一个太脆弱的解决方案:它需要更改 CMS 模板、内容本身以及对所有 future 内容作者的法令——如果主题发生变化，这将是多余的再次。
最佳答案
我看不到使用文本元素符号点执行此操作的方法，但可以使用背景图像来完成。 CSS3 支持多个背景图像和多个图像位置，因此我们可以在 h1 的任意一端放置一个图像元素符号点，如下所示:
用这个替换你的 CSS:
body {text-align:center}
h1 {
font-weight: bold;
padding: 0 16px;
background-image: url(http://www.getyourgame.net/images/BulletPointGreen.png),url(http://www.getyourgame.net/images/BulletPointGreen.png);
background-position: left center, right center;
background-repeat: no-repeat;
display: inline-block;
}
需要填充来为要点腾出空间。我使用了一些随机的要点图像，但请注意我已经指定了两次。然后我可以为这两个图像指定不同的位置； h1 的一左一右。最后，display:inline-block 阻止了 h1 填充整个宽度，这会导致元素符号点始终位于父元素的边缘，而不是位于父元素的边缘标题文本。
希望这对你有用。
关于html - 如何垂直居中包含标题的元素符号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10275253/
24
4
0
给定一个字符串，例如 s="##$$$#"，我如何找到索引之前的“#”符号数等于“”数的索引$"符号在索引之后？ 示例:如果 s="##$$$#"，则输出将为 2。 解释:在索引 2 之前我们有 2
在本教程中，您将借助示例了解 JavaScript 符号。 JavaScript 符号 JavaScript ES6 引入了一种新的原始数据类型，称为 Symbol（符号）。符号是不可变的（不能更改）
在“函数编程的工艺”一书中，符号 '>.>' 将函数连接在一起，与 '.' 的方向相反。但是当我使用 ghci 实现它时，它显示了超出范围的错误 '>.>'。为什么？它是不再使用的旧符号吗？ 最佳答案
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。 已关
我需要从向量中删除 \"。这是我的数据: data <- c("\"https://click.linksynergy.com/link?id=RUxZriH*PWc&offerid=323058.1
我在 Nginx 配置中使用正则表达式来捕获文件 URL，但如果文件 URL 包含 # 符号，正则表达式模式将不会捕获它。 这里是nginx的配置部分。 location ~ ^/p/(?[\w\-=
如何使 & 符号在此图表的第一组条形/列下正确显示: http://jsfiddle.net/VxbrK/2/ 应该是“Apples & Oranges”而不是“Apples & Oranges”。
**在verilog中是什么意思？ 我为测试台提供了以下逻辑 localparam NUM_INPUT_BITS = 1; localparam NUM_OUTPUT_BITS
我有一个使用正则表达式来验证电子邮件地址的方法。 public String searchFormail(String searchWord) { Pattern pattern = Patt
我想将一个字符串拆分为数字部分和文本/符号部分我当前的代码不包含负数或小数，并且表现得很奇怪，在输出的末尾添加了一个空列表元素 import re mystring = 'AD%5(6ag 0.33-
我有一些代码需要从数组中选择一个随机字符串，但它一直返回单个字母或数字。如何解决这个问题？ var name = ["Yayek", "Vozarut", "Gezex",
我刚开始使用 Python，我在考虑应该使用哪种表示法。我读过 PEP 8关于 Python 符号的指南，我同意那里的大多数内容，除了函数名称(我更喜欢混合大小写风格)。 在 C++ 中，我使用匈牙利
在用 C# 编写代码时，我错误地在 if 语句中的变量前添加了一个符号(而不是感叹号)。 bool b = false; if (@b) { } 我很惊讶它编译成功，没有任何错误。 我想知道:上面的代
本文实例为大家分享了特殊字符替换电话号码中某一部分的方法，ios利用-号替换电话号码中间四位，供大家参考，具体内容如下 1、效果图 2、代码 rootviewcontroll
当我使用“x”和“z”作为符号时，这段代码没有问题: from sympy import * x, z = symbols('x z') y = -6*x**2 + 2*x*z**0.5 + 50*x
我需要从文本中删除标点符号: data <- "Type the command AT&W enter. in order to save the new protocol on modem;"
我有几个数字是 numeric 类。下面的例子。 df = c(12974,12412,124124,124124,34543,4576547,32235) 现在我想在每个数字前添加 '$' 符号而不
我有一个 highcharts 图例，其中符号以不同的大小显示，因为它们在实际图表中的大小不同。不幸的是，当数据点的大小增加时，它们也会在图例中增加。无论数据点大小如何，我都希望图例符号保持相同的大小
我需要使用包含平均值+-SD的标题。到目前为止，我只能得到以下信息: "Mean +- SD or N (%)" [1] "Mean +- SD or N (%)" 如何直接使用“+-”符号？您知道一
使用 XSLT 和 XPath 1.0，我有一个要转义的字符串以用于 URL，例如: one word & another 因此，描述元素的 text() 应该进行 URL 转义。 我该怎么做
我是一名优秀的程序员,十分优秀！