Question

我似乎无法让这个工作并花费太多时间在这上面。我假设它应该很简单。我正在寻找将图像放在某些文本顶部并让它们都水平居中的理想效果，但也让它们在中间垂直居中。

任何帮助将不胜感激！

A = a row, B = a column, C = an image, D =

of text

Answer 1

@ TO15108，这可以使用flexbox完成。要创建一个，请将display属性值设置为flex。

从那里，您可以利用justify-content和align-items属性来获得您想要完成的垂直和水平居中。

我已经为您提供了一个代码段，以便了解其工作原理。确保将其扩大到它的全尺寸。

＆＃13;

.d-flex {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}


.col {
    flex: 0 0;
    max-width: 50%;
    padding: 0px;
    margin-right: 5px;
    text-align: center;
}

＆＃13;

<div class="d-flex">
    <div class="col">
        <img src="http://via.placeholder.com/350x150">
        <div>some text</div>
    </div>
    <div class="col">
        <img src="http://via.placeholder.com/350x150">
        <div>some text</div>
    </div>
</div>

＆＃13;

Answer 2

我通常使用bootstrap，但有时候很好弯曲。

＆＃13;

.B {
			display: flex;
			background: blue;
			height: 400px;
			width: 100%;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 10px;
		}
		
		.A {
			display: flex;
		}
		
		.C {
			height: 50%;
			width: 50%;
		}
		
		img {
			width: 100%;
			height: 100%;
		}

＆＃13;

<div class="A" style="background:black">
		<div class="B" style="background:yellow">
			<div class="C" style="background:blue">
				<img src="" alt="">
			</div>
			<h3>Sorry for flexing on you.</h3>
		</div>
		<div class="B" style="background:blue">
			<div class="C" style="background:yellow">
				<img src="" alt="">
			</div>
			<div>
				<h3>Feel the power of flex.</h3>
			</div>
		</div>
	</div>

＆＃13;

Answer 3

您可以使用a表格：表格单元格可以使用“vertical-align：middle”属性垂直对齐。

这是一个快速的小提琴：https://jsfiddle.net/rL927hn0/

页面本身就是一个表格：

#page {position:absolute;width:100%;height:100%;display:table;}

内容放在table-cell（示例中的A元素）中：

#content {display:table-cell;vertical-align:middle;text-align:center;}

内容的每个部分（示例中的B元素）都是内联块：

.square {display:inline-block;}

干杯

CSS中的CSS垂直对齐对象

3 个答案: