Question

我创建了一个表格，在其中使用了一些绝对定位以确保单元格始终为正方形。

当我尝试在这些div中垂直居中放置文本时遇到问题。在我正在使用的结构内，我找不到一种很好的方法来完成此任务。

代码

 Dim varr As Variant
 Dim j as long
 varr = ws2.Range("C1:C" & ws2.Range("C" & Rows.count).End(xlUp).Row).value
    For j = LBound(varr) To UBound(varr)
         If varr(j, 1) = specs then
         end if
    Next j

table.module-table {
	width: 100%;
	border-collapse: collapse;
	border: none;
	text-align: center;
}
table.module-table tr { vertical-align: middle; }
td.module {
	border: 1px solid rgba(255,255,255,0);
	padding: 0;
	width: 33.33%;
	position: relative;
	vertical-align: middle;
}
td.module:after {
	content: '';
	display: block;
	margin-top: 100%;
}
td.module .module-number {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ccc;
	transition: .5s all;
}
td.module a {
	display: block;
	color: #fff;
	line-height: 1;
	font-size: 55px;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}
td.module .module-number.one-one:hover { background: #e11b22; }
td.module .module-number.one-two:hover { background: #c81b74; }
td.module .module-number.one-three:hover { background: #800052; }
td.module .module-number.one-four:hover { background: #46026b; }
td.module .module-number.one-five:hover { background: #7f4e99; }
td.module .module-number.one-six:hover { background: #2a2a86; }
td.module .module-number.one-seven:hover { background: #105bac; }
td.module .module-number.one-eight:hover { background: #00605d; }
td.module .module-number.one-nine:hover { background: #809027; }

提琴-https://jsfiddle.net/gvan12br/

Answer 1

只需在Calendar cal = Calendar.getInstance(); // today Date toDate=cal.getTime(); cal.add( Calendar.DATE, -30 ); //date before 30 days Date fromDate=cal.getTime(); Criteria criteria = session.createCriteria(Model.class , "s") .createAlias("make", "m") .add(Restrictions.between("s.modelCreationDate", fromDate, toDate)) // if the above condition dosen't give you exact result you may try following(2) // try gt or lt ... as needed //.add(Restrictions.ge("publicationDate", fromDate)) //.add(Restrictions.le("publicationDate", fromDate)) .setProjection( Projections.projectionList() .add(Projections.groupProperty("m.makeId").as("makeId")) .add(Projections.property("m.makeName").as("makeName")) ) .setResultTransformer(Transformers.aliasToBean(Make.class)); List<Make> ll2 = criteria.list();选择器上使用旧的flexbox技巧：

.module-number

这将强制.module-number { display: flex; align-items: center; justify-content: center; }使用CSS flexbox，并且<div>指示它垂直放置项目（垂直于主轴，默认为水平），align-items: center指示它将项目水平居中：

justify-content: center

table.module-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  text-align: center;
}

table.module-table tr {
  vertical-align: middle;
}

td.module {
  border: 1px solid rgba(255, 255, 255, 0);
  padding: 0;
  width: 33.33%;
  position: relative;
  vertical-align: middle;
}

td.module:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td.module .module-number {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc;
  transition: .5s all;
  /* Use flexbox to center content */
  display: flex;
  align-items: center;
  justify-content: center;
}

td.module a {
  display: block;
  color: #fff;
  line-height: 1;
  font-size: 55px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

td.module .module-number.one-one:hover {
  background: #e11b22;
}

td.module .module-number.one-two:hover {
  background: #c81b74;
}

td.module .module-number.one-three:hover {
  background: #800052;
}

td.module .module-number.one-four:hover {
  background: #46026b;
}

td.module .module-number.one-five:hover {
  background: #7f4e99;
}

td.module .module-number.one-six:hover {
  background: #2a2a86;
}

td.module .module-number.one-seven:hover {
  background: #105bac;
}

td.module .module-number.one-eight:hover {
  background: #00605d;
}

td.module .module-number.one-nine:hover {
  background: #809027;
}

Answer 2

尝试将行高指定为33.33vw，如下所示：

table.module-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  text-align: center;
}

table.module-table tr {
  vertical-align: middle;
}

td.module {
  border: 1px solid rgba(255, 255, 255, 0);
  padding: 0;
  width: 33.33vw;
  position: relative;
  vertical-align: middle;
}

td.module:after {
  content: '';
  display: block;
  margin-top: 100%;
}

td.module .module-number {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ccc;
  transition: .5s all;
  line-height: 33.33vw;
}

td.module a {
  display: block;
  color: #fff;
  font-size: 55px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}

td.module .module-number.one-one:hover {
  background: #e11b22;
}

td.module .module-number.one-two:hover {
  background: #c81b74;
}

td.module .module-number.one-three:hover {
  background: #800052;
}

td.module .module-number.one-four:hover {
  background: #46026b;
}

td.module .module-number.one-five:hover {
  background: #7f4e99;
}

td.module .module-number.one-six:hover {
  background: #2a2a86;
}

td.module .module-number.one-seven:hover {
  background: #105bac;
}

td.module .module-number.one-eight:hover {
  background: #00605d;
}

td.module .module-number.one-nine:hover {
  background: #809027;
}

<div class="module-wrapper">
  <table class="module-table">
    <tr>
      <td class="module">
        <div class="module-number one-one"><a href="#">1.1</a></div>
      </td>
      <td class="module">
        <div class="module-number one-two"><a href="#">1.2</a></div>
      </td>
      <td class="module">
        <div class="module-number one-three"><a href="#">1.3</a></div>
      </td>
    </tr>
    <tr>
      <td class="module">
        <div class="module-number one-four"><a href="#">1.4</a></div>
      </td>
      <td class="module">
        <div class="module-number one-five"><a href="#">1.5</a></div>
      </td>
      <td class="module">
        <div class="module-number one-six"><a href="#">1.6</a></div>
      </td>
    </tr>
    <tr>
      <td class="module">
        <div class="module-number one-seven"><a href="#">1.7</a></div>
      </td>
      <td class="module">
        <div class="module-number one-eight"><a href="#">1.8</a></div>
      </td>
      <td class="module">
        <div class="module-number one-nine"><a href="#">1.9</a></div>
      </td>
    </tr>
  </table>
</div>

在绝对位置的div表中垂直对齐文本

2 个答案: