繁体   English   中英

将div中的嵌入式块垂直对齐并固定高度

[英]Vertically align an inline-block in a div with a fixed height

密码笔

我要垂直和水平对齐,容器的高度和宽度将因其他因素而固定。

我怎么做?

我试过使用flex

display: flex;
justify-content: center;
flex-direction: column;

但是它摆脱了我的水平对齐方式

实际上,有多种 方法可以实现垂直对齐,这是一种:

 div { width: 300px; height: 150px; background-color: #ddd; text-align: center; font-size: 0; } div::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } a { width: 100px; height:50px; background-color: #ff0000; display: inline-block; vertical-align: middle; font-size: 16px } 
 <div> <a href="#">Some Text</a> </div> 

找到了解决方案!

在div父对象上:

position:relative;

在一个孩子上:

position: absolute;
top: 50%;
left: 50%;
margin-left: -half_its_width;
margin-top: -half_his_height;

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM