在 CSS 中将垂直 <img> 与居中的 <table> 对齐答案

【问题标题】：Aligning a vertical <img> to a centrally positioned <table> in CSS在 CSS 中将垂直 <img> 与居中的 <table> 对齐
【发布时间】：2016-07-07 22:22:27
【问题描述】：

我正在尝试将 image 标签 class="right-slider" 与 table 标签对齐，与 index.html 下方的图片相同，并且有无论屏幕尺寸如何，它们都会 100% 显示在屏幕上。

有人可以帮助我吗？谢谢

index.html screenshot

html {
  width: 100%;
  height: 100%;
}

body {
  font-family: segoe ui light;
  width: 100%;
  height: 100%;
}


.resources {
  width: 1483px;
  padding: 2px;
  background-color: #e0832c;
  color: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transition: all 0.4s ease;
}

.resources:hover {
  width: 1498px;
  padding: 5px;
  font-weight: medium;
}

table {
  margin-left: auto;
  margin-right: auto;
}

td {
  border: none;
  height: 120px;
  width: 210px;
  background-color: #ccc3c3;
  color: #f2eaea;
  font-size: 20px;
  vertical-align: 10px;
  transition: all 0.5s ease;
}

td:hover {
  width: 210px;
  height: 123px;
  background-color: #a09a9a;
  box-shadow:inset 0px 0px 85px rgba(0,0,0,.3);
  -webkit-box-shadow:inset 0px 0px 85px rgba(0,0,0,.3);
  -moz-box-shadow:inset 0px 0px 85px rgba(0,0,0,.3);
}

th {
  color: white;
  background-color: grey ;
  padding: 5px;
  font-weight: lighter;
  font-size: 15px;
}



a {
  margin-bottom: 50px;
  text-decoration: none;
}



.right-slider {
  float: right;
  margin: 33 98 0;
  position: relative;
}

<html>
  <head>
  </head>

  <body><!--HTML Code-->
    <div>
      <a href=""><img class="right-slider" src="rightslider.png" height="680px"></a>
    </div>
    <div class="resources">Resource Assignment</div>
    <table>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
      <tr>				<!--1st week-->
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
        <td>07</td>
      </tr>
      <tr>				<!--2nd week-->
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
      </tr>
      <tr>				<!--3rd week-->
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
      </tr>
      <tr>				<!--4th week-->
        <td>22</td>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
      </tr>
      <tr>				<!--5th week-->
        <td>29</td>
        <td>30</td>
        <td>31</td>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
      </tr>
    </table>

  </body>
</html>

【问题讨论】：

如果你用你的 html 做一个snippet 就好了。
嗨，乔恩，感谢您的快速回复，我已经添加了我的 HTML 和 CSS 代码 sn-ps 是您的意思吗？或者我已经添加了我想要实现的图像截图......我已经更新了图像“index.html”
不，我不是这个意思。您可以在我的评论中的link 中了解它。
哦，我现在通过您的链接阅读了它，我会尝试这样做。谢谢！
我用 stacksn-p 编辑，现在不需要 @alimarwan

标签： html css vertical-alignment

【解决方案1】：

如果您不需要支持旧浏览器，也可以使用 Flexbox：

#wrapper{
display: flex;
}
.right-slider {
  margin:auto;
}

JsFiddle

【讨论】：

嗨，Sam，我会尝试使用上面的建议并让你知道 :) 谢谢！！

【解决方案2】：

您可以使用 vh（视口高度）：

.right-slider {
float: right;
margin-top: 50vh;
}

【讨论】：

谢谢 samfred，缩小浏览器时 img 和 table 崩溃了……也不起作用！
是否可以将 img 和 table 标签包装在 div 中，并且仅通过 CSS 定位 div ？我试着这样做，但我缺乏一些 CSS 魔法
是的，你可以把img和table放在另一个div里，例如设置：min-width: 600px;
试过了，但还是一样:)

【解决方案3】：

DEMO

更新以下css：

table {
  margin-left: auto;
  margin-right: auto;
  width:96%;
}
.right-slider {
  float: right;
  margin: 33 98 0 0;
  position: relative;
  width:4%;
}

【讨论】：

感谢 Dipali，我尝试了上面的代码，.right-slider 上升到屏幕并占据了中间的所有空白区域，导致表格直接位于下方:(