1

ボタン（ボタンスタイルのアンカー、ボタンでも同じことが起こります）を垂直方向に中央揃えにしたいのですが、少しずれているようです。

これは私が使用するhtmlコードです:

<div class="alert alert-info">
    Text on the left
    <p class="pull-right">
        <a class="btn btn-default" href="#">Link</a>
    </p>
</div>

これはjsfiddleでどのように見えるかです: http://jsfiddle.net/TeAvH/

4

3 に答える 3

3

を使用するpull-rightと、Bootstrap が適用されfloat:rightます。これにより、要素がドキュメント フローから削除されます。つまり、親コンテナーの高さに影響しなくなります。これは、最初に修正する必要があることです。いくつかの方法がありますが、私のお気に入りはoverflow:auto親要素に適用する方法です。

この問題は解決されましたが、テキストの行の高さがボタンの高さと同じではないという事実に対処する必要があります。これを修正するには、行の高さを割り当てるだけです。この場合、ボタンの高さは36pxであるため、 を使用できますline-height:36px。

ここにいくつかの作業コードがあります（そしてここに更新されたfiddleがあります）：

HTML

<div class="alert alert-info">
Text on the left
<a class="btn btn-default pull-right" href="#">Link</a>
</div>

CSS

div {
    overflow: auto;
    line-height: 36px;
}
于 2013-08-11T07:32:00.570 に答える
3

これは、ボタン クラスにdisplay:inline-blockプロパティがあるために発生するようです。これをに変更display:inlineすると、問題が解決するはずです。

.alert p .btn {
    display:inline;
}

ここでフィドルを更新しました。

デフォルト.btnのクラス プロパティは次のとおりです。

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
于 2013-08-11T07:46:04.650 に答える
0

まず、一部の HTML 要素にはデフォルトのマージンやパディングがあることに注意してください。詳細はこちら。

この場合に何が起こっているかをより詳細に制御するには、テキストとその他の要素を<div>フローティング内にそれぞれ左と右に配置できます。

于 2013-08-11T07:35:00.727 に答える