CSS: align two element, to the left and right in the same line WHITHOUT floats
You can use some flexbox magic: h1 { display: flex; justify-content: space-between; } <h1> <span>Align me left</span> <a href=””>align me right</a> </h1>
You can use some flexbox magic: h1 { display: flex; justify-content: space-between; } <h1> <span>Align me left</span> <a href=””>align me right</a> </h1>
Bootstrap 3 v3 Text Alignment Docs <p class=”text-left”>Left aligned text.</p> <p class=”text-center”>Center aligned text.</p> <p class=”text-right”>Right aligned text.</p> <p class=”text-justify”>Justified text.</p> <p class=”text-nowrap”>No wrap text.</p> Bootstrap 4 v4 Text Alignment Docs <p class=”text-xs-left”>Left aligned text on all viewport sizes.</p> <p class=”text-xs-center”>Center aligned text on all viewport sizes.</p> <p class=”text-xs-right”>Right aligned text on all viewport sizes.</p> … Read more
You can try the below example. Do use ‘-‘ before the width to ensure left indentation. By default they will be right indented; which may not suit your purpose. System.out.printf(“%2d. %-20s $%.2f%n”, i + 1, BOOK_TYPE[i], COST[i]); Format String Syntax: http://docs.oracle.com/javase/7/docs/api/java/util/Formatter.html#syntax Formatting Numeric Print Output: https://docs.oracle.com/javase/tutorial/java/data/numberformat.html PS: This could go as a comment to DwB’s … Read more
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
Solution with display inline-block This adaptive grid is much simpler : less markup and less CSS so it will be easier to implement in a production site and adapt to your exact needs. =>> DEMO <<= (resize the result window to see the effect) html, body { margin:0; padding:0; } #container{ font-size:0; margin:0 auto; width:1000px; … Read more
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