个人中心
gpt4 book ai didi

html - 在 CSS 中将垂直 与居中定位的 对齐
转载 作者：行者123 更新时间：2023-11-28 02:57:52 24 4
gpt4 key购买 nike

我正在尝试将 image 标签 class="right-slider" 与 table 标签对齐，如下图所示 < strong>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>

最佳答案

DEMO

更新以下CSS:

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

关于html - 在 CSS 中将垂直 <img> 与居中定位的 <table> 对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36130537/

24 4 0
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com