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 can you resize li labels without resorting to coupling or absolute sizes?

    How to order properties in a declaration block? [closed]

    Mini-map of HTML page sections shown as fixed anchors in viewport

    How to ignore white spaces in between tags, CSS, PHP

    How to use below css as inline for table row (tr)?

    Can someone help me figure out how to put normal links into this Jquery Menu?

    Why does overflow hidden affect height and how can I fix it in this example?

    How to put the menu over the content?

    How to add !important to every element in a CSS file [duplicate]

    how to make small loading circle by changing css height and width?

    Css How to override

    [closed]

    How can i perform a smooth css transition to my sticky bar?

    How to center
      in a page?

    How to get a textarea to fill in the height of a table column?

    How to use CSS Loader in my website?

    Javascript: How do I get the id of a clicked link and then style it in css

    How to Toggle Switch - Prices and Config? [closed]

    How does CSS computation for background percentages work?

    How to create an Hours of Operation list with HTML and CSS?

    How to implement fluid font size using pure CSS

    How to navigate divs in a custom built single page app? [closed]

    How can I load css file in Meteor for just one page?

    How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?

    How to make div stay visible when hovering on it

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    How to Change main menu color?

    How to make my PHP code, display in html table?

    How to display first tab by default in css?

    How to enable CSS editor features in VS 2012?

    Using CSS, how can I style a div tag to full the width, even when the viewport is scaled?