如何在已经居中对齐的元素周围添加元素？

Question

我创建了一个表单，其中一些文本元素垂直对齐，如下所示：

使用flexbox在页面上水平和垂直居中：

.my-class {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
}

我现在要做的就是保持这种对齐方式（即保持页面上的所有内容已准确到位），同时在第一个文本框的两侧添加一些元素。我尝试在div中包装所有内容，但由于文本框两侧的元素宽度不同，文本框失去了对齐方式：

如您所见，长文本框现在不对齐。如何在第一个文本框之前和之后添加元素而不移动它？

Answer 1

假设 url / pass / button 是那个要居中的人，并且每边都有 https / path ，我会这样做，我使用flex row 容器和伪元素将每组项目分成他们自己的行。

使用此标记，还可以完全控制根据屏幕宽度等移动项目。

使这项工作的两个主要内容是伪元素，它们以其全宽度强制它们成为自己的行，同时将内容与order属性一起向下推，启用分别在传递和 auth 之前定位它们。

Stack snippet

.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;     /*  horiz. center items  */
  align-content: center;       /*  vert. center wrapped items  */
  /*align-items: center;*/     /*  vert. center unwrapped items  */
}
.flex div:nth-child(1),
.flex div:nth-child(3) {       /*  https/path item  */
  flex: 1;                     /*  share space left equal  */
}
.flex div:nth-child(2),
.flex div:nth-child(4) {       /*  url/pass item  */
  flex-basis: 300px;           /*  need equal width  */
}
.flex::before {                /*  1st line breaker  */
  content: ''; width: 100%;
  order: 1;
}
.flex div:nth-child(4) {
  order: 2;
}
.flex::after {                 /*  2nd line breaker  */
  content: ''; width: 100%;
  order: 3;
}
.flex div:nth-child(5) {
  order: 4;
}

/*  styling  */
.flex {
  height: 200px;
  border: 1px solid red;
}
.flex span {
  display: inline-block;
  border: 1px solid gray;
  padding: 2px;
  margin: 2px;
}
.flex div:nth-child(2) span,
.flex div:nth-child(4) span {
  width: calc(100% - 10px);
}
.flex div:nth-child(1) {
  text-align: right;
}

<div class="flex">
  <div><span>http(s)</span></div>
  <div><span>url</span></div>
  <div><span>path</span></div>
  <div><span>***</span></div>
  <div><span>authenticate</span></div>
</div>

如果 url / pass 的宽度应与父级宽度一致，请使用百分比与CSS Calc结合使用。

Stack snippet

.flex {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
}
.flex div:nth-child(1),
.flex div:nth-child(3) {
  flex: 1;
}
.flex div:nth-child(2),
.flex div:nth-child(4) {
  flex-basis: 60%;
}
.flex::before {
  content: ''; width: 100%;
  order: 1;
}
.flex div:nth-child(4) {
  order: 2;
}
.flex::after {
  content: ''; width: 100%;
  order: 3;
}
.flex div:nth-child(5) {
  order: 4;
}

/*  styling  */
.flex {
  height: 200px;
  border: 1px solid red;
}
.flex span {
  display: inline-block;
  border: 1px solid gray;
  padding: 2px;
  margin: 2px;
}
.flex div:nth-child(2) span,
.flex div:nth-child(4) span {
  width: calc(100% - 10px);
}
.flex div:nth-child(1) {
  text-align: right;
}

<div class="flex">
  <div><span>http(s)</span></div>
  <div><span>url</span></div>
  <div><span>path</span></div>
  <div><span>***</span></div>
  <div><span>authenticate</span></div>
</div>

另一种选择是保持初始flex 列方向，并使用额外的包装器使用 http（s）/ path 项目的绝对定位。

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flex > div:nth-child(-n+2) {
  position: relative;
  width: 60%;
}
.flex div div:nth-child(1) {
  position: absolute;
  top: 0;
  right: 100%;
}
.flex div div:nth-child(3) {
  position: absolute;
  top: 0;
  left: 100%;
}

/*  styling  */
.flex {
  height: 200px;
  border: 1px solid red;
}
.flex span {
  display: inline-block;
  width: calc(100% - 10px);
  border: 1px solid gray;
  padding: 2px;
  margin: 2px;
}
.flex div div:nth-child(1) {
  text-align: right;
}
.flex div div:nth-child(1),
.flex div div:nth-child(3) {
  width: auto;
}

<div class="flex">
  <div>
    <div><span>http(s)</span></div>
    <div><span>url</span></div>
    <div><span>path</span></div>
  </div>
  <div><span>***</span></div>  
  <div><span>authenticate</span></div>
</div>

更新（基于另一个有类似需求的问题）

还可以保留更简单的标记，没有额外的包装，并使用inline-flex结合使flex父也是一个flex容器。

Stack snippet

body {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.flex {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.flex div:nth-child(2),
.flex div:nth-child(4) {
  width: 300px;
}
.flex div:nth-child(1) {
  position: absolute;
  top: 0;
  right: 100%;
}
.flex div:nth-child(3) {
  position: absolute;
  top: 0;
  left: 100%;
}

/*  styling  */
.flex {
  border: 1px solid red;
}
.flex span {
  display: inline-block;
  width: calc(100% - 10px);
  border: 1px solid gray;
  padding: 2px;
  margin: 2px;
  text-align: left;
}
.flex div div:nth-child(1) {
  text-align: right;
}
.flex div div:nth-child(1),
.flex div div:nth-child(3) {
  width: auto;
}

<div class="flex">
  <div><span>http(s)</span></div>
  <div><span>url</span></div>
  <div><span>path</span></div>
  <div><span>***</span></div>  
  <div><span>authenticate</span></div>
</div>