2

我正在尝试创建一个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描述的效果比我描述的要好。请注意，在 header 元素上方存在一些容器（它们只是不是它的专有容器）也可以使用。

我不想更改 HTML，因为这是一个太脆弱的解决方案：它需要更改 CMS 模板、内容本身以及对所有未来内容作者的命令——如果主题再次更改，这将是多余的。

4

2 回答 2

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填充整个宽度，这将导致项目符号点始终位于父元素的边缘而不是标题文本的边缘。

希望这对你有用。

于 2012-04-25T16:40:59.097 回答
1

我设法通过创造性地使用表格显示样式非常接近：

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 浏览器引擎中运行不正确。

于 2012-04-30T13:25:15.840 回答