Question

我试图在html表中对齐html视频标签和图像。但是没有成功。好像视频标签的底部对齐而不是顶部对齐。

图片附有图片。

Css

.newsImage {
    width: 354px;
    height: 204px;
    vertical-align: top;
    text-align: left;
}

HTML：

<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
    <tr>
        <td colspan="5" style="height: 80px; margin-bottom: 20px;">
            <h2>NYHETER</h2>
        </td>
    </tr>
    <tr>
        <td class="newsImage">
            <span id="Content_lbImageNews1"><video width="354" height="240" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></span>
        </td>
        <td>&nbsp;</td>
        <td class="newsImage">
            <span id="Content_lbImageNews2"><a href="newsDetail.aspx?newsID=19"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></a></span>
        </td>
        <td>&nbsp;</td>
        <td class="newsImage">
            <span id="Content_lbImageNews3"><a href="newsDetail.aspx?newsID=27"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></a></span>
    </tr>
</table>

Answer 1

在内联高度值中，将其设置为240，而不是与其他元素匹配的204：

<video width="354" height="240" controls="controls" preload="metadata">

改回原先的位置，您就必须弄乱其他任何代码。

.newsImage {
  min-width: 354px;
  min-height: 204px;
  vertical-align: top;
  text-align: left;
}

<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
    <tr>
        <td colspan="5" style="height: 80px; margin-bottom: 20px;">
            <h2>NYHETER</h2>
        </td>
    </tr>
    <tr>
        <td class="newsImage">
            <span id="Content_lbImageNews1"><video width="354" height="204" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></span>
        </td>
        <td>&nbsp;</td>
        <td class="newsImage">
            <span id="Content_lbImageNews2"><a href="newsDetail.aspx?newsID=19"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></a></span>
        </td>
        <td>&nbsp;</td>
        <td class="newsImage">
            <span id="Content_lbImageNews3"><a href="newsDetail.aspx?newsID=27"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></a></span>
    </tr>
</table>

Answer 2

您是否尝试过将此文件添加到CSS文件

.newsImage {
    vertical-align:top;
}

.newsImage {
  vertical-align:top;
}

<html>
</html>

<body>
<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
  <tr>
    <td colspan="5" style="height: 80px; margin-bottom: 20px;">
      <h2>NYHETER</h2>
    </td>
  </tr>
  <tr>
    <td class="newsImage">
      <span id="Content_lbImageNews1"><div class="videoWrapper"><video width="100%" height="100%" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></div></span>
    </td>
    <td>&nbsp;</td>
    <td class="newsImage">
      <span id="Content_lbImageNews2"><a href="newsDetail.aspx?newsID=19"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></a></span>
    </td>
    <td>&nbsp;</td>
    <td class="newsImage">
      <span id="Content_lbImageNews3"><a href="newsDetail.aspx?newsID=27"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></a></span>
  </tr>
</table>
</body

如何对齐html5视频标签和图像标签

2 个答案: