Question

.test {
    height: 58px;
    width: 120px;
    display: inline-block;
    border: solid 1px black;
}

<button class="test">
    <span>TEXTHERE TEXTHERE</span> <span class="badge">1</span>
</button>

如何使徽章在2行文字上垂直对齐？

修改：目标结果

Answer 1

请试试这个。我添加了这个css：

.test .text {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
}

.test {
  height: 58px;
  width: 120px;
  display: inline-block;
  border: solid 1px black;
}
.test .text {
  display: inline-block;
  vertical-align: middle;
  width: 80%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button class="test">
    <span class="text">TEXTHERE TEXTHERE</span><span class="badge">1</span>
</button>

Answer 2

请试试这个..

<html>
<head>
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <style>
        .badge{
            margin-left: 80px;
            margin-top: -29px;
        }
        .test {
            height: 58px;
            width: 130px;
            display: inline-block;
            border: solid 1px black;

        }
        .test .text {
            display: inline-block;
            vertical-align: middle;
            width: 80%;
            margin-left: -30px;
        }
    </style>
</head>
<body>
    <button class="test">
        <span class="text">TEXTHERE TEXTHERE</span><span class="badge">1</span>
    </button>
</body>

垂直对齐引导徽章和按钮内的文本

2 个答案: