How can I vertically centre bullets that bracket headers

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.

$('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation(); window.open(this.href, '_self'); }); } }); This seems much smoother....

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

This can also be fixed by adding vertical-align: top to the span's CSS rule. The reason that both rules fix the problem is that they enforce the vertical alignment of...

How to put the menu over the content?

If I am understanding you correctly you want your menu to overlap your content? Try and use z-index. Like so: #block-system-main-menu{ position:absolute; left:7px; top:162px; z-index:2; } #block-menu-menu-menu-socialmedia{ position:absolute; left:7px; top:436px;...

https://jsfiddle.net/VixedS/zket24av/ CSS #bar { display:inline-block; width: 100%; height: 50px; max-height:50px; background-color: #595959; box-shadow: 0px 2px 2px #888888; } .bar-fixed { top:-100px; z-index: 9999; position: fixed; } JS $(document).ready(function() { var...