0

I am using bootstrap buttons in my menu bar at the top of the page. Some of the buttons have short link names, while others have long link names. I want to split the long link names into two lines, but doing that makes the short buttons half the size of the resulting link link buttons. And if I put break tags after the short link titles, then the short link titles are on the top of their lines instead of in the middle. When I remove the break tags and force a height for each button, the short link titles are still at the top of the button. How can I vertically center-justify the names of the links in the 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 does not contain anything meaningful yet, but I am including it below for thoroughness: 

.container {
padding-top: 10px;
margin-left: 50px;
width: 700px;
}

.form-horizontal {
width: 100%;
}

input[type="text"] {
height: 25px;
}

.navbar .nav > li > a {
color: #000000;
}

.form-horizontal .control-label {
text-align: left;
}
CodeMed
  • 9,527
  • 70
  • 212
  • 364
  • maybe you can use one of these: http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically – mmgross Mar 20 '15 at 20:54

1 Answers1

0

Codemed you have to float left and change the width as 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>
  • Your code did not fix the problem. Note that your code does nothing for the **vertical** alignment. The word "home" is still top-aligned and not middle-aligned as intended. – CodeMed Mar 20 '15 at 21:10