html5 - CSS/html auto adjusting line joining left-aligned word and right aligned -
i have been trying make line join 2 words. sentence 1 on left , no 2 on right.everything should on same line.
i want line flexible , adjust width when browser re sized, , have far failed miserably this.
it similar :
see jsfiddle
<h1>heading</h1> <h1>this longer heading</h1> css
h1 { overflow: hidden; text-align: center; } h1:before, h1:after { background-color: #000; content: ""; display: inline-block; height: 1px; position: relative; vertical-align: middle; width: 50%; } h1:before { right: 0.5em; margin-left: -50%; } h1:after { left: 0.5em; margin-right: -50%; } but 1 line joining words.
is you're after?
html:
<div class="header"> <div class="headerpart1">heading</div> <div class="headerpart2">this longer heading</div> </div> css:
.header { overflow: hidden; text-align: center; border-top: 1px solid #000; border-bottom: 1px solid #000; vertical-align: middle; } .headerpart1, .headerpart2 { display: inline-block; clear: none; }
Comments
Post a Comment