justify

How can I align text directly beneath an image?

Your HTML: <div class=”img-with-text”> <img src=”https://stackoverflow.com/questions/1225130/yourimage.jpg” alt=”sometext” /> <p>Some text</p> </div> If you know the width of your image, your CSS: .img-with-text { text-align: justify; width: [width of img]; } .img-with-text img { display: block; margin: 0 auto; } Otherwise your text below the image will free-flow. To prevent this, just set a width to … Read more

CSS text justify with letter spacing

Here’s a script which can do it. It isn’t pretty, but maybe you can hack it to meet your needs. (Updated to handle resizing) function SplitText(node) { var text = node.nodeValue.replace(/^\s*|\s(?=\s)|\s*$/g, “”); for (var i = 0; i < text.length; i++) { var letter = document.createElement(“span”); letter.style.display = “inline-block”; letter.style.position = “absolute”; letter.appendChild(document.createTextNode(text.charAt(i))); node.parentNode.insertBefore(letter, node); … Read more

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

Use text-align:justify on the container, this way it will work no matter how many elements you have in your list (you don’t have to work out % widths for each list item #nav { text-align: justify; min-width: 500px; } #nav:after { content: ”; display: inline-block; width: 100%; } #nav li { display: inline-block; } <ul … Read more

How to justify text in a label

Unfortunately only the three most basic and simple types of alignment are supported: Right, Left and Center. The fourth one, Justified or Block, is not supported in any .NET control afaik, not even in a RichtTextBox 🙁 The only workaround would be to add either spaces or better a smaller whitespace character like thin space(U+2009) … Read more

“text-align: justify;” inline-block elements properly?

Updated the “Future” solution info below; still not yet fully supported. Present Workaround (IE8+, FF, Chrome Tested) See this fiddle. Relevant CSS .prevNext { text-align: justify; } .prevNext a { display: inline-block; position: relative; top: 1.2em; /* your line-height */ } .prevNext:before{ content: ”; display: block; width: 100%; margin-bottom: -1.2em; /* your line-height */ } … Read more

Justify the last line of a div?

Here’s a cross-browser method that works in IE6+ It combines text-align-last: justify; which is supported by IE and a variation of the :after pseudo-content method. It includes a fix to remove extra space added after one line text elements. CSS: p, h1{ text-align: justify; text-align-last: justify; } p:after, h1:after{ content: “”; display: inline-block; width: 100%; … Read more