我正在尝试创建一种效果，其中 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/