Question

我希望我的按钮和锚点看起来一样。但是当我在一个按钮/锚点内有长文本时，它应该断开并显示垂直居中的文本。当有足够的空间时，文本也应该居中。

为了让文本居中而不会在文本中断时溢出我设置line-height:1我也设置vertical-align:1当然我必须设置white-space: normal否则文本不会休息，按钮会溢出。

现在我有以下问题（使用chrome测试）：当文本是单行时，它将不再在锚标记内居中...此外我不想更改DOM （将文本包装在span等中。）

你能告诉我为什么按钮的行为与锚不同吗？我已经检查了chrome检查器中的所有样式（计算 - ＆gt;显示全部）。我还检查了:before和:after样式。

＆＃13;

.btn{
  white-space: normal !important;
  height: 45px !important;
  vertical-align: middle !important;
  line-height: 1 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <div class="col-xs-2">
    <a href="#" class="btn btn-default">test loooooooooooooooooooongstring<a>
    <br /><br />
    <button class="btn btn-default">test loooooooooooooooooooongstring</button>
  </div>
</div>
    
<br /><br /><br />
    
<div class="row">
  <div class="col-xs-12">
    Should be centered!!
    <br />
    <a href="#" class="btn btn-default">test string<a>
     <br /><br />
    <button class="btn btn-default">test string</button>
  </div>
</div>

＆＃13;

Answer 1

这对我有用：

.btn{
   display: inline-flex;
   align-items: center;
}

Answer 2

你应该在这里改变 //你需要改变＆＃39; col-xs-2＆＃39; col-xs-12或更高版本，因为当文本太长时，按钮会从col-xs-2宽度扩展。你明白吗？

@Component
public class ResultValidator implements Validator{

    @Override
    public boolean supports(Class<?> aClass) {
        return Result.class.equals(aClass);
    }

    @Override
    public void validate(Object o, Errors errors) {
        Result result = (Result)o;
     /*   if (isFloat(""+result.getWeight())) {
            errors.rejectValue("weight", "form.weight.numberformat");
        }
        if (isFloat(""+result.getSeries())) {
            errors.rejectValue("series", "form.serie.numberformat");
        }
        if (isFloat(""+result.getRep())) {
            errors.rejectValue("rep", "rep.numberformat");
        }*/

    }

    public Boolean isFloat(String validate){
        try{
            Float f = Float.parseFloat(validate.toString());
            return true;
        }catch (NumberFormatException e){
            return false;
        }
    }

}

CSS：锚点和按钮的垂直对齐文本

2 个答案: