css - HTML Vertically Align Text in Header with Image -
i'm making header bootstrap. page-header
contains image , text. want text vertically centered in header. seems easy, fix, i'm running trouble. made custom class called v-align
set vertical-alignment: middle;
, it's not working. suggestions?
image:
html:
<html> <head> <!-- css --> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <div id="form-container"> <div class="page-header text-center"> <div class="row"> <img class="col-xs-4"src="popcorn.png" width="100" height="auto" > <div class="col-xs-8 v-align"> <h2>sparky's movie theater</h2> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script> </body> </html>
css class:
.v-align { height: 100%; display:table-cell; vertical-align: middle; }
i able text vertically aligned adding following css code:
css:
#box { height: 100px; line-height: 100px; text-align: center; } #spantext { display: inline-block; vertical-align: middle; line-height: normal; }
html:
<div class="col-xs-8" id="box"> <h2 id="spantext">sparky's movie theater</h2> </div>
Comments
Post a Comment