html - Align element with multiline text to the center of parent block preserving left text-alignment -
there menu multiple items. each item had one-line contents, aligned center of it. 1 item two-line contents has been added.
according design plans two-line item-contents-element still should aligned center of parent item, text in item-contents-element should left-aligned: how-it-should-look
also, items responsive, , items contents may change , other items - using fixed width item contents inappropriate.
starting this code:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>align element wit multiline text center of parent block preserving left text-alignment</title> <style> .list-item { border: 1px solid #999; padding: 10px; text-align: center; width: 350px; } .item-contents { border: 1px dashed #999; display: inline-block; text-align: left; font-size: 30px; } </style> </head> <body> <div class="list-item"> <div class="item-contents">we've got verylongwordhere</div> </div> </body> </html> we've found this solution. doesn't work in ie11. way, i'd grateful if you'll explain me how works.
the question is: "is there cross-browser (ie11, chrome, ff, safari) solution implement without js?"
edit: thank answers, cannot set fixed width 2 reasons (sorry guys, that's fault didn't included in question initially):
- this not universal enough (because item content text may change)
- item size responsive fixed item contents width @ 1 screen width, bad @ screen width.
try updating html , css
<div class="list-item"> <span class="someclass"> we've got verylongwordhere </span> </div> .item-contents { border: 1px dashed #999; text-align: left; font-size: 30px; padding:10px } span.someclass { border:1px dashed #000; padding:5px; display:inline-block; text-align:left; max-width:60%; }
Comments
Post a Comment