How can I vertically centre bullets that bracket headers


Tags: html5,css3

Problem :

I'm trying to create an effect where h# elements are bracketed by bullet characters. If the the heading breaks across multiple lines, the bullets should be to the left and right of the text block, and vertically centred.

Take this example HTML5 and 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: ' —';
}
​

This renders the bullets, but when there are line breaks the bullets end up wrapping with the text itself.

How can I change the CSS so that the bullets are placed to the left or right of the whole text block, and vertically centered against it? This jsFiddle depicts the effect better than I can describe it. Note that there are containers that exist above the header element (they just aren't exclusive containers for it) which could also be used.

I don't want to change the HTML because that's just too fragile a solution: it requires changes in the CMS templates, the content itself, and an edict to all future content authors — which will be superfluous if the theming ever changes again.



Solution :

I managed to get quite close with creative use of table display styling:

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';
}

Why just "quite close"? Well, firstly I haven't verified that this is standard-mandated behaviour and not just some quirk of rendering. Secondly, it works in Chrome 18 and Firefox 12, but I haven't bothered to check in Internet Explorer or Safari — and I know it doesn't work quite right in the Android browser engine.


    CSS Howto..

    How to add and remove div's (input)

    How to make a header bar fold over the webpage css

    How to retain CSS transform scale on checked state

    CSS: how to have child1 the same height as child2?

    How to style five rows with alternating fixed/variable width?

    How to dynamically modify CSS class using Javascript / jQuery with wrapper?

    How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?

    How to enqueue second stylesheet in Wordpress child theme?

    How to set size of SVG image in :before pseudo-class?

    Framework7->CSS: How to make tabs under popover scrollable

    How to make a css media query snippet in ATOM editor

    How to figure out what is going on with this nice CSS horizontal menu? [closed]

    How to set background url for css files in thymeleaf?

    How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?

    Problems with jQuery Image Slideshow / Rotating Banner using timeout / interval

    How do i apply Table Header color to Table body using JQuery

    How to Clear Every Third Box in a Row? [duplicate]

    can't find out how to create a css selector for yahoo stocks page

    How to use easily svg as icon?

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How to make text go over a CSS background img

    How to create a progress bar

    How to set hover of the block which contains icon with HTML or CSS?

    how to decrease the height of content area for

    with css?

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    How to include multiple Css Class in ActionLink?

    In CSS, how to create automatic section numbering only when there are multiple sections?

    How to line up a label to the right of a styled checkbox

    How to change both fill and stroke in svg with css

    How to make the element located in the center of a div?