html - Why this won't bring the image to the center and middle at vertical position? -
this shows image. i'd show image in center , middle @ vertical position.
still shows on top , lefted.
how can fix?
<div class="row"> <div class="box"> <div class="left"> <div class="title"><a href="/communities/california">california</a></div> <div class="icon" style=";vertical-align:middle;text-align:center;"> <a href="/users/john"><img alt="356" src="/images/356.jpg" style="max-width: 100px; min-width: 100px" /></a> </div> <div class="message"> <div class="body"><a data-original-title="california" class="btn" rel="popover" data-placement="top" data-content="test">read</a></div> <a href="/users/sign_in" class="btn btn-primary">message</a> </div> </div> </div> </div>
update
<div class="row"> <div class="box"> <div class="left"> <div class="title"><a href="/communities/california">california</a></div> <div class="icon" style="display: table;"> <a href="/users/john"><img alt="356" src="/images/356.jpg" style="display: table-cell;vertical-align: middle;text-align: center;" /></a> </div> <div class="message"> <div class="body"><a data-original-title="california" class="btn" rel="popover" data-placement="top" data-content="test">read</a></div> <a href="/users/sign_in" class="btn btn-primary">message</a> </div> </div> </div> </div>
you cannot vertically align element that, need display: table-cell
nested under element having display: table;
property. i've made example scratch here issue encountering.
div.wrap { display: table; height: 100px; width: 100px; border: 1px solid #f00; } div.wrap span { display: table-cell; vertical-align: middle; text-align: center; }
Comments
Post a Comment