考虑以下 html 代码:
<span style="display: inline-block;">
<div>Caption - to display at top</div>
<div>Picture - to display at the middle</div>
</span>
<span style="display: inline-block;">
<div>Caption - to display at top</div>
<div>Picture - to display at the middle</div>
</span>
当这些跨度彼此相邻显示时(连续 2 个或 3 个),我希望标题在顶部对齐,图片在中心对齐。图片可能大小不一,标题可能占多行。例如。这是我目前拥有的:http://probqa.com/ 这是我希望它看起来的样子: 这可能只用 HTML/CSS 来做吗?怎么办?
或者为此我需要一些 JavaScript 吗?什么?
最佳答案
要在中心放置一些东西,您可以使用这个 css 技巧:
.center{
position: fixed;
left: 50%; /*move the top left point of block to the center*/
transform: translate(-50%,0%);
margin-top:60px;
}
当您想要更改两个图像或文本之间的距离时,请更改 margin-top 属性。
关于javascript - 如何将跨度的高度设置为同一行中跨度的最大高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54574701/