html - css using float: right with vertical-align: middle -
i have 2 divs (in wrapper) using display photograph , title of photograph side side , vertical-align middle.
the issue having when attempt float photograph right , float title left, title , photograph no longer vertical-aligned middle.
it seems when use float, vertical-align becomes top.
how add floats , keep vertical-align middle? have spent 2 hours trying know. hope can point out have done wrong.
here code:
<div class="live_preview_top_header_wrapper"> <div class="live_preview_top_header_title">title</div> <div class="live_preview_top_header_photograph"> <img id="id_name_details_photograph_01_live_preview" src="{{ name_details_photograph_url }}" /> </div> </div> .live_preview_top_header_wrapper { width: 100%; background-color: #ffaaaa; vertical-align: top; } .live_preview_top_header_title { display: inline-block; background-color: #aaaaff; vertical-align: middle; float: left; } .live_preview_top_header_photograph { display: inline-block; background-color: #cc0033; vertical-align: middle; float: right; }
try centering line-height in parent div, , using vertical-align: middle; on content eg image , title.
.live_preview_top_header_wrapper { width: 100%; background-color: #ffaaaa; line-height: 200px; } .live_preview_top_header_wrapper { width: 100%; background-color: #ffaaaa; line-height: 200px; } .live_preview_top_header_photograph { display: inline-block; background-color: #cc0033; float: right; line-height: 200px; } .live_preview_top_header_photograph img { vertical-align: middle; }
Comments
Post a Comment