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..
Try this. I am using jquery add div and delete it. if you want more ask me your use case.I change my code. $(document).ready(function() { var i = 0; $("#plus").click(function()...
If the ribbon is the issue, then use borders on an empty (0-size) element (which you can add with :after pseudo-element).. Html <div id="content"> <div id="ribbon"></div> </div> CSS #content{ background-color:#77c;...
Checked state Adding the checked state to the input element should maintain the scale on the image. Checked code: li input[type="radio"]:checked + label img { transform: scale(2); transform-origin: center left;...
LIVE DEMO #container{ position: relative; /* needed */ border: green solid 5px; } #child1{ position: absolute; /* needed */ background: yellow; overflow-y: auto; height: 100%; /* fit parent */ width:...
flexbox can do that. * { box-sizing: border-box; } .container div { height: 75px; border:1px solid grey; } .container { display: flex; } .variable { background: lightgreen; flex: 1 0...
Use .wrap, wraps an HTML structure around each element in the set of matched elements $('.old-style').wrap('<div class="responsive-table"></div>').removeClass().addClass('table table-bordered table-condensed'); .responsive-table { color: red; } .table { font-weight: bold; }...
The lightweight method is to use CSS, and use the property background-image of the div: jsFiddle <div id="featured-box-right"></div> CSS: #featured-box-right { width: 300px; height: 150px; background-image: url('http://i.stack.imgur.com/OywDf.png'); } #featured-box-right:hover {...
*UPDATED Based on what you added to the question, you should be able to just add to that function and register the stylesheet. The full function would look like this:...
You can use svg as background-image: .withimage:before { content: ""; display:block; height:125px; width:125px; background-size: 125px 125px; background-image: url(test.svg); background-repeat: no-repeat; } Here is example Also you can try use this...
There you go, fixed: https://jsfiddle.net/xbvqksu8/3/ This CSS was added: .popover-inner { max-height:100vh !important; } .list-block ul { overflow-Y:auto; } If you want your menu to fit in the screen better...
See the bottom of the page you linked: http://flight-manual.atom.io/using-atom/sections/snippets/ You can also use multi-line syntax using """ for larger templates So your template should be '.source.css': 'css-media': 'prefix': 'css-media' 'body':...
This appears to be all CSS. In chrome, if you inspect element on one of the menu items, you'll see the basic structure as: <nav> <ul> <li class=> <a>Link</a><!-- this...
So, here's how to set dynamic relative paths in background image url property in the css using thymeleaf's inline text value, <style th:inline="text"> body{ background: url{[[@{/img/Background.jpg}]]} no-repeat center center fixed;...
Use css tables: FIDDLE1 - little content FIDDLE2 - little content + large footer FIDDLE3 - lots of content Markup <header class="row">header content</header> <div class="row">content here</div> <footer class="row">footer content</footer> CSS...
<img id="headerlogo" /> Don't do that (an image tag with no src attribute) Put a div that will hold the space (set position:relative with width & height in css)...
If you are generating the table yourself just add a col group to it and style that. Something like (jsFiddle example): <colgroup> <col style="width: 3%; background-color: whitesmoke" /> <col style="width:...
Assuming your top level wrapper has a fixed width in which you would like to fit the rows of 3 boxes each, the best solution is to put a row-container...
I'm not sure, but it seems that you want to retrieve the value of the span which is child to the span with id time_rtq_ticker, so use this selector: #time_rtq_ticker>span...
Because you need the svg to be embedded as an actual SVG so your CSS applies to it, you could use a little utility script like this: function replaceSVGS(elements){ if(!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image",...
This happens because of the 2px border. Can be solved by adding margin-right:-2px; to the triangle so as to move it right by 2px. .outer { padding: 20px; } .arrow_box...
it's caused of the p tag, try to use a span tag instead. <div id="sign-in-button"> <span>Sign-in</span> </div> ...
The jQuery UI library makes it easy. The examples on that page show how to create a progress bar, and the "Methods" tab shows how to update the value.
Try like this: Demo .fa-home { color: white; font-size: 30px; background-color: transparent; vertical-align:middle; /* added this */ } #top_head { background-color: blue; display: block; position: absolute; top: 20px; left: 300px;...
You should be able to change the height with the "line-height" property make sure there is not another css overwriting it. to make sure you can add !important at the...
For those wondering, I finally solved the issue. I am not a CSS guy and I know even less about SASS. Anyway, what I did was extract the vaadin-themes-7.5.3 folder...
<li>@Html.ActionLink("Home", "Index", "Home", null, new { @class = "btn btn-info" })</li> The fourth parameter is for the routeValues and the fifth parameter is for htmlAttributes....
If the <h3> tags are all under the same parent you can go with :not and :only-of-type selectors: h3:not(:only-of-type)::before{ counter-increment: sub-section; content: counter(section) "." counter(sub-section) " "; } The :only-of-type...
Your text label is being pushed beneath the toggle because it's set to display: block. You could either: 1. Change this to display: inline-block, which would bring the inline text...
Fiddling a bit in the blind without any code, but my 5 cents say you need to target the SVG elements (inside the SVG). For instance : .icons svg:hover rect...
div { text-align: center; } Demo here: http://jsfiddle.net/Wc8kz/ And only one suggestion: img is self-closing tag and should be defined as <img src="..." /> or even <img src="..."> in HTML5....