Question

我正在尝试创建一个效果，其中h#元素被子弹字符括起来。如果标题跨越多行，则项目符号应位于文本块的左侧和右侧，并垂直居中。

以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以便将项目符号放在整个文本块的左侧或右侧，并垂直居中？这个jsFiddle描述的效果比我描述的更好。请注意，标题元素上方存在容器（它们不是它的独占容器），也可以使用它们。

我不想更改HTML，因为这只是一个太脆弱的解决方案：它需要更改CMS模板，内容本身以及所有未来内容作者的法令 - 如果主题发生变化，这将是多余的试。

Answer 1

我看不到使用文本项目符号进行此操作的方法，但可以使用背景图像完成此操作。 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填充整个宽度，这会导致子弹点不断地位于父元素的边缘而不是标题文本的边缘。

希望这适合你。

Answer 2

我设法quite close创造性地使用了表格显示样式：

h1 {
    font-weight: bold;
    text-align: center;
    display: table;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
}

h1:before {
    vertical-align: middle;
    content: '—';
    display: table-cell;
    padding-right: '1em';
}

h1:after {
    vertical-align: middle;
    content: '—';
    display: table-cell;
    padding-left: '1em';
}

为什么只是“非常接近”？好吧，首先我没有证实这是标准强制行为，而不仅仅是渲染的一些怪癖。其次，它适用于Chrome 18和Firefox 12，但我没有费心去检查Internet Explorer或Safari - 而且我知道它在Android浏览器引擎中无法正常工作。

如何垂直居中支撑标题的子弹

2 个答案: