Question

首先，它与其他问题不同，因为我不能使用position: absolute;，因为我的jQuery插件通常使用{我不在示例中使用此插件，但我必须对内部表做position: relative;。

HTML：

<div id="table">
  <div id="inside-table" >
    <span>Hello</span>
  </div>
</div>

CSS：

#table {
  width: 100%;
  height: 100px;
  border: solid 1px black;
  background-color: transparent;
}
#inside-table {
  position: relative;
  width: 98%;
  height: 80px;
  background-color: transparent;
  border: solid 1px black;
  margin: 0 auto;
  margin-top: 10px;
}
#inside-table span {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

我正试图在表格上垂直和水平居中文本（不是单行）。有什么建议吗？

Answer 1

只需使用flexbox

即可

#table {
  width: 100%;
  height: 100px;
  border: solid 1px black;
  background-color: transparent;
}
#inside-table {
  position: relative;
  width: 98%;
  height: 80px;
  background-color: transparent;
  border: solid 1px black;
  margin: 0 auto;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#inside-table span {
  
}

<div id="table">
  <div id="inside-table">
    <span>Hello</span>
  </div>
</div>

Answer 2

试试这个：

.table {
  display: table;
  width: 100%;
}
.td {
  display: table-cell;
  vertical-align: middle;
}

<div class="table">
  <div class="td">
    text
  </div>
  <div class="td">
    <img alt="" src="http://url style="width: 120px; height: 148px;" />
  </div>
</div>

Answer 3

我把它集中在这里：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="10000"
    android:fromXDelta="100%"
    android:interpolator="@android:anim/linear_interpolator"
    android:repeatCount="infinite"
    android:repeatMode="restart"
    android:toXDelta="-100%"
>
</translate>

如果你希望它向一个方向或另一个方向移动，你总是会弄乱百分比

垂直和水平居中文本，无需绝对定位

3 个答案: