Question

我在页面顶部的菜单栏中使用自举按钮。某些按钮具有短链接名称，而其他按钮具有长链接名称。我想将长链接名称分成两行，但这样做会使得短按钮的大小是生成的链接链接按钮的一半。如果我在短链接标题之后放置中断标记，那么短链接标题位于其行的顶部而不是中间。当我删除break标记并强制每个按钮的高度时，短链接标题仍然位于按钮的顶部。 如何在下方按钮中垂直居中对齐链接名称？

<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>

我的css文件中没有任何有意义的内容，但为了彻底性，我将其包含在下面：

.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;
}

Answer 1

编码你必须向左浮动并改变宽度，如下所示：

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>

垂直居中的自举按钮

1 个答案: