Question

我正在使用css和bootstrap来开发一个网站并使用verticle-align：middle;是不是应该如何工作，但在研究这个主题时，我找到了垂直对齐项目的解决方案，但它可能无法在旧浏览器中使用。

我发现这就是将图像集中在它们所在的列中。

.logo-container{
    height: 100%;
    display: flex;
    align-items : center;
    .logo{

    }
}
}

这是我尝试使用但无法使用它。

section#providers{
.logo-container{
    height: 100%;
    display: table;
    .logo{
        width: 100%;
        display: table-cell;
        vertical-align: middle !important;
    }
}
}

这是HTML

<section id="providers">
	<div class="container">
		<div class="row" id="logos">

			<div class="col-2">
				<div class="logo-container">
					<div class="logo">
						<img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/uh.png" class="img-fluid">
					</div>
				</div>
			</div>
			<div class="col-2">
				<div class="logo-container">
					<div class="logo">
						<img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/test1.png" class="img-fluid">
					</div>
				</div>
			</div>

			</div>
</div>
</section>

根据我研究的所有内容，您需要将父项设置为显示为表格，然后将子项显示为表格单元格，并将垂直algin设置为中间。我在图片中遗漏了什么？

Answer 1

父div缺少位置：relative;

$t = New-Object System.Net.Sockets.TcpClient 'my.hostname', 123; if($t.Connected) {"OK"}

css vertical align无法正常工作

1 个答案: