How about: <div style=”width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center”> <span style=”font-size: 40px; background-color: #F3F5F6; padding: 0 10px;”> Section Title <!–Padding is optional–> </span> </div> Check out this JSFiddle. You can use vw or % to make it responsive.
You can use line-height: 50px;, you won’t need vertical-align: middle; there. Demo The above will fail if you’ve multiple lines, so in that case you can wrap your text using span and than use display: table-cell; and display: table; along with vertical-align: middle;, also don’t forget to use width: 100%; for #abc Demo #abc{ font:Verdana, … Read more
The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren’t. So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn’t work)
Andres Ilich has it right. Just in case someone misses his comment… A.) If you only have one line of text: div { height: 200px; line-height: 200px; /* <– this is what you must define */ } <div>vertically centered text</div> B.) If you have multiple lines of text: div { height: 200px; line-height: 200px; } … Read more
Just add position: relative; top: 50%; transform: translateY(-50%); to the inner div. What it does is moving the inner div’s top border to the half height of the outer div (top: 50%;) and then the inner div up by half its height (transform: translateY(-50%)). This will work with position: absolute or relative. Keep in mind … Read more
The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements. So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/ .frame { height: 25px; /* Equals maximum image height */ width: 160px; border: 1px solid red; white-space: nowrap; /* This is required unless you … Read more
Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari. .outer { display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; … Read more
Alternative approach: http://www.thecssninja.com/css/real-text-rotation-with-css p { writing-mode: tb-rl; }
The Flexible box way Vertical alignment is now very simple by the use of Flexible box layout. Nowadays, this method is supported in a wide range of web browsers except Internet Explorer 8 & 9. Therefore we’d need to use some hacks/polyfills or different approaches for IE8/9. In the following I’ll show you how to … Read more
vertical-align applies to the elements being aligned, not their parent element. To vertically align the div’s children, do this instead: div > * { vertical-align:middle; // Align children to middle of line } See: http://jsfiddle.net/dfmx123/TFPx8/1186/ NOTE: vertical-align is relative to the current text line, not the full height of the parent div. If you wanted … Read more