Flexbox表中的水平和垂直对齐方式

Question

我正在尝试构建一个基于响应表格的日历，其中一列（$total = count($_FILES['files']['name']); // Loop through each file for($i=0; $i<$total; $i++) { //Get the temp file path $tmpFilePath = $_FILES['files']['tmp_name'][$i]; //Make sure we have a filepath if ($tmpFilePath != ""){ if ($tmpFilePath === $_POST['selectImage']) { // This is the selected image } //Setup our new file path $newFilePath = "gig_pics/" . $_FILES['files']['name'][$i]; //Upload the file into the temp dir move_uploaded_file($tmpFilePath, $newFilePath); $file_sql = "INSERT INTO `gig_pics`(id,gig_id,pic) VALUES ('','$gid','$newFilePath')"; $file_res = mysqli_query($conn,$file_sql); } } ）垂直居中于其他列旁边。

我还试图将月/日标题与第一列（星期日列）左对齐，而不使用静态填充值。

我愿意重组HTML。

.calendar-arrow

* {
  box-sizing: border-box;
}
#event-calendar {
  margin: 0 auto;
  padding: 0 1%;
  overflow: auto;
}
#event-calendar h1 {
  padding-bottom: 15px;
  text-align: left;
}
#event-calendar #calendar-left {
  float: left;
  border-right: 1px solid grey;
  padding: 30px;
  width: 50%;
  height: 400px;
}
#event-calendar #calendar-right {
  float: right;
  padding: 30px;
  width: 50%;
  height: 400px;
}
#event-calendar .table .table-row .table-cell {
  font-size: 2em;
  color: black;
}
#event-calendar .table .table-header .table-cell {
  color: grey;
}
.table {
  display: flex;
  flex-flow: column nowrap;
  box-pack: justify;
  justify-content: space-between;
  width: 100%;
  height: 250px;
}
.table .table-row {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  align-items: center;
}
.table .table-row .table-cell {
  display: flex;
  padding: 5px;
  flex-flow: row nowrap;
  flex-grow: 1;
  flex-basis: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  justify-content: center;
}
.table .table-row .event-on {
  position: relative;
}
.table .table-row .event-on::before {
  position: absolute;
  z-index: -9;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  border-radius: 100%;
  width: 35px;
  height: 35px;
  content: '';
}
.table .calendar-arrow {
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  flex-basis: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  justify-content: center;
}

笔：http://codepen.io/ourcore/pen/ENJOLO

谢谢！

Answer 1

要使箭头垂直居中，您可以使用绝对定位的伪元素，而不是实际DOM元素中的箭头。

从HTML中删除箭头并将其添加到CSS：

div.table {
  position: relative;
}
#calendar-left div.table::before {
   content: "\2190";
   position: absolute;
   left: -30px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 2em;
}
#calendar-right div.table::before {
   content: "\2192";
   position: absolute;
   left: -30px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 2em;
}

revised codepen

您的日标题行与您的月份h1左对齐的原因是您的标题行以justify-content: center为中心。

.table-cell {
  display: flex;
  justify-content: center;
}

这会使每列中的数据居中，但不适用于h1。

您必须沿着它们的相互容器的左边缘对齐两个元素：

revised codepen

或者你可以删除居中：

revised codepen