Question

我正在尝试连续使用几个upvote / downvote计数器，但是遇到了几个问题。参见here。箭头和投票应该更小并且获得更少的空间，但是我还不知道如何限制它。相反，它们扩大了我的行。他们附近的名字也没有居中。我如何居中？如果那是唯一的方法，我可能会全部更改为一个表。

这是代码：

.sss {
  float: left;
  clear: left;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="container-fluid bg-primary pl-0 text-white">

  <div class="d-flex flex-row">
    <div class="p">
      <span vote-target="a.id" class="vote ">
          <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
          <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
      </span>
      <span>NAME </span>
    </div>

    <div class="p">
      <span vote-target="a.id" class="vote ">
          <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
          <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
      </span>
      <span>NAME </span>
    </div>
  </div>

Answer 1

您也可以制作计数器容器d-flex（flexbox），然后使用align-items-center ...

<div class="d-flex">
  <div class="p d-flex align-items-center">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>

  <div class="p d-flex align-items-center">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>
</div>

https://www.bootply.com/FvTTsvIDGX

Answer 2

我删除了太多代码，但您喜欢结果

.p {
    display: flex;
}

.p span {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="d-flex flex-row">
  
  <div class="p">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>
  
  <div class="p">
    <span vote-target="a.id" class="vote ">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
      <span class="sss" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span>NAME </span>
  </div>
</div>

使用自举类

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="d-flex flex-row">
  
  <div class="p d-flex">
    <span vote-target="a.id" class="vote d-flex flex-column justify-content-center align-items-center">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a> 
      <span class="sss d-flex flex-column justify-content-center align-items-center" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span class="d-flex flex-column justify-content-center align-items-center">NAME </span>
  </div>
  
  <div class="p d-flex">
    <span vote-target="a.id" class="vote d-flex flex-column justify-content-center align-items-center">
      <a style="cursor: pointer;" id="upvote" mv="1" class="sss fa fa-sm fa-arrow-up uvote"></a>
      <span class="sss d-flex flex-column justify-content-center align-items-center" id="count">1</span>
      <a style="cursor: pointer;" id="downvote" class="sss fa fa-sm fa-arrow-down dvote"></a>
    </span>
    <span class="d-flex flex-column justify-content-center align-items-center">NAME </span>
  </div>
</div>

https://www.codeply.com/go/anuRTmVlBl

使用bootstrap 4垂直对齐3列

2 个答案: