Question

我有一个完全位于页面中间的表格，我想在第一个表格下添加另一个表格。添加第二个表后，我仍然希望第一个表位于网页的中间。有没有办法可以实现这个目标？

谢谢！

<!DOCTYPE html>
<html>
<head>
<style>
html {
height: 100%;

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #0F1E80 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #0F1E80 100%);
/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #0F1E80 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #0F1E80));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #0F1E80 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to top, #FFFFFF 0%, #0F1E80 100%);

 background-size: cover;
}
/*
.tg  {border-collapse:collapse;border-spacing:0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tg td{
font-size:25px;
font-color:#000000;
padding:10px 5px;
overflow:hidden;
word-break:normal;
}
.tg th{
font-size:25px;
font-weight:normal;
font-color:#000000;
padding:10px 5px;
overflow:hidden;
word-break:normal;
}*/

.tg  {
border-collapse:collapse;
border-spacing:0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tg td{font-size:14px;
padding:10px 5px;
overflow:hidden;
}
.tg th{font-size:14px;
font-weight:normal;
padding:10px 5px;
overflow:hidden;
}
.tg ul.left_justify {
  padding:0;
  margin:auto;
  list-style-type:none;
  text-align: left;
}
.tg ul.right_justify {
  padding:0;
  margin:auto;
  list-style-type:none;
  text-align: right;
}
.a_font {font-size: 25px;
  color: #000000;
    text-decoration: none;
}
.tc {
    float:center;
}

</style>
</head>
<body>

<table class="tg">
  <tr>
    <th class="tg-031e">
        <ul class="left_justify">
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
        </ul>
    </th>
    <th class="tg-031e">
        <IMG src="image.png" alt="oops!">
    </th>
    <th class="tg-031e">
        <ul class="right_justify">
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
            <li><a class="a_font" href="">My Link</a></li>
        </ul>
    </th>
  </tr>
</table>

<table >
  <tr>
    <th>this is a test</th>
  </tr>
</table>
</body>
</html>

Answer 1

而不是使用.tg {left：50％; transform：translate（-50％， - 50％）;}

尝试将其设置为.tg {margin-left：auto; margin-right：auto;}并将每个表与这两个CSS属性对齐。

Answer 2

你正在寻找这样的东西吗？

https://jsfiddle.net/Lw9knyLj/1/

我刚补充说：

<table align="center" style="margin-top:60%">

<强>更新

https://jsfiddle.net/Lw9knyLj/2/

表格不会显示在网页中间的另一个表格下方

2 个答案: