在 Bootstrap 4 中水平居中 '::before' 项目和其他 div 具有弹性概念的元素

Question

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  top:50%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>
               <span>1</span>
            </div>
            <div>
               <p>Company Name</p>
            </div>
            <div>
               <p>Applied Job For</p>
            </div>
            <div>
               <p>status</p>
            </div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

我在这里使用 bootstrap 4.3.1 和 flex 概念以及 CSS 的一些自定义部分。这里 status-light 和其他 div 项目水平居中不正确，我如何水平居中？

注意：不想通过添加自定义顶部属性值（例如 top:58%；或 top:58px;）来解决问题，我需要一个适当的逻辑解决方案。

Answer 1

删除 <p> 的填充。

此外，要对齐红点，请将 top: calc(50% - 5px); 添加到 ::before。

见MDN calc。

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  top: calc(50% - 5px);
}

.job-list-view-section p{
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>
               <span>1</span>
            </div>
            <div>
               <p>Company Name</p>
            </div>
            <div>
               <p>Applied Job For</p>
            </div>
            <div>
               <p>status</p>
            </div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

此外，您可以尝试显示父 flex

.status-light-red::before {
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}
.status-light{
  display: flex;
  align-items: center;
  justify-content: center;
}
.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  /*top pos removed*/
}

.job-list-view-section p {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="container py-5">
  <div class="row job-list-view-section">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
        <div>
          <span>1</span>
        </div>
        <div>
          <p>Company Name</p>
        </div>
        <div>
          <p>Applied Job For</p>
        </div>
        <div>
          <p>status</p>
        </div>
        <div class="status-light status-light-red"></div>
      </div>
    </div>
  </div>
</div>

Answer 2

您可以使用垂直翻译使其与文本元素保持一致。请注意，我删除了似乎没有任何作用的 span 和 paragraph 元素。

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  transform: translateY(-50%);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>1</div>
            <div>Company Name</div>
            <div>Job Applied For</div>
            <div>Status</div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

Answer 3

您可以为 p 提供与容器相同的 line-height - 此处我添加了一些边框和填充，只是为了清楚地表明什么是什么。我还把一些 p 变成了 div，因为根据您的要求，这看起来“更干净”。

.job-list-view-section {
  border: 2px blue solid;
  padding: 0.25rem;
}

.job-list-view-section .col-12 {
  border: 1px red solid;
  padding: 0.25rem;
}

.job-list-view-section .col-12 .d-flex {
  padding: 0.25rem;
}

.job-list-view-section .col-12 .my-shadow>* {
  border: 1px green solid;
  display: flex;
  align-items: center;
  justify-content: center;
  height:3rem;
}

.job-list-view-section .col-12 .my-shadow>*>p {
  background-color: #ddffdd;
  display: inline-block;
  align-self: flex-start;
  line-height: 2.9rem;  /*match to align text in the p to the green box, less than 3 for the borders */
}

.wrap-things {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px lime;
  align-self: center;
}

.status-light {
  border: solid 1px lime;
  height: 0.5rem;
  width: 0.5rem;
}

.status-light-red::before {
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before {
  content: "";
  border-radius: 50%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="container py-5">
  <div class="row job-list-view-section">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
        <div>
          <span>1</span>
        </div>
        <div>
          <div>Company Name</div>
        </div>
        <div>
          <p>Applied Job For</p>
        </div>
        <div>
          <div>status</div>
        </div>
        <div class="wrap-things">
          <div class="status-light status-light-red"></div>
        </div>
      </div>
    </div>
  </div>
</div>

看，边框：

.status-light-red::before{
  background-color: rgb(255, 0, 0);
  box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -webkit-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
  -moz-box-shadow: 0px 0px 5px 2px rgb(255 0 0 / 75%);
}

.status-light::before{
  content: "";
  height: 10px;
  width: 10px;
  position: absolute;
  border-radius: 50%;
  top:50%;
}

.my-shadow >div{border: solid 1px red;}
.my-shadow >div>p{border: solid 1px lime;}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">

<div class="container py-5">
   <div class="row job-list-view-section">
      <div class="col-12">
         <div class="d-flex justify-content-between align-items-center border border-dark my-shadow p-4">
            <div>
               <span>1</span>
            </div>
            <div>
               <p>Company Name</p>
            </div>
            <div>
               <p>Applied Job For</p>
            </div>
            <div>
               <p>status</p>
            </div>
            <div class="status-light status-light-red"></div>
         </div>
      </div>
   </div>
</div>

在 Bootstrap 4 中水平居中 '::before' 项目和其他 div 具有弹性概念的元素

Horizontally centre '::before' item and other div element with flex concept in Bootstrap 4

html

css

flexbox

bootstrap-4