html - vertically centering bootstrap buttons -
i using bootstrap buttons in menu bar @ top of page. of buttons have short link names, while others have long link names. want split long link names 2 lines, doing makes short buttons half size of resulting link link buttons. , if put break tags after short link titles, short link titles on top of lines instead of in middle. when remove break tags , force height each button, short link titles still @ top of button. how can vertically center-justify names of links in buttons below?
<spring:url value="/" var="homeurl"></spring:url> <a href="${fn:escapexml(homeurl)}" class="btn btn-info btn-lg" style="vertical-align:middle; min-height:45px">home</a> <spring:url value="/start-simple" var="simpleurl"></spring:url> <a href="${fn:escapexml(simpleurl)}" class="btn btn-info" style="vertical-align:middle; min-height:45px">start<br>simple</a>
my css file not contain meaningful yet, including below thoroughness:
.container { padding-top: 10px; margin-left: 50px; width: 700px; } .form-horizontal { width: 100%; } input[type="text"] { height: 25px; } .navbar .nav > li > { color: #000000; } .form-horizontal .control-label { text-align: left; }
codemed have float left , change width shown:
html:
<html> <head> <link rel="stylesheet" href="style.css"/> </head> <spring:url value="/" var="homeurl"></spring:url> <a href="${fn:escapexml(homeurl)}" class="btn btn-info btn-lg" style="float:left; margin-right:5px; min-height:45px">home</a> <spring:url value="/start-simple" var="simpleurl"></spring:url> <a href="${fn:escapexml(simpleurl)}" class="btn btn-info" style="float:left;width:10px">start simple</a> </html>
Comments
Post a Comment