Html 如何将一个div与另一个div垂直对齐？
我在父div中放置了两个不同内容的div，并希望设置垂直对齐第一个div和第二个div 对不起，我的语言不好 .标题别针{ 位置：相对位置； } .pin图标{ 位置：绝对位置； 宽度：50px； 高度：50px； -webkit边界半径：25px； -moz边界半径：25px； 边界半径：25px； 文本对齐：居中； 背景色：333； 颜色：fff； } .明星{ 字体大小：30px； 线高：50px； } .标题容器{ 左侧填充：60px； 宽度：400px； 字体大小：24px； } ★ 这个标题不稳定。这个标题不稳定。此标题不稳定。`请在此处输入代码` .标题别针{ 位置：相对位置； } .pin图标{ 显示：内联块； 宽度：50px； 高度：50px； -webkit边界半径：25px； -moz边界半径：25px； 边界半径：25px； 文本对齐：居中； 背景色：333； 颜色：fff； 垂直对齐：中间对齐； } .明星{ 字体大小：30px； 线高：50px； } .标题容器{ 左侧填充：30px； 宽度：400px； 显示：内联块； 字体大小：24px； 垂直对齐：中间对齐； } ★ 这个标题不稳定。这个标题不稳定。此标题不稳定。`请在此处输入代码`Html 如何将一个div与另一个div垂直对齐？,html,css,Html,Css,我在父div中放置了两个不同内容的div，并希望设置垂直对齐第一个div和第二个div 对不起，我的语言不好 .标题别针{ 位置：相对位置； } .pin图标{ 位置：绝对位置； 宽度：50px； 高度：50px； -webkit边界半径：25px； -moz边界半径：25px； 边界半径：25px； 文本对齐：居中； 背景色：333； 颜色：fff； } .明星{ 字体大小：30px； 线高：50px； } .标题容器{ 左侧填充：60px； 宽度：400px； 字体大小：24px； } ★
只要图元具有高度，这将使图元垂直居中
position: absolute;
top: 0;
bottom: 0;
margin: auto;
你可以用很多方法得到这个。简而言之，我只是在你的css类中添加了一行。顶部的pin图标：25% .标题别针{ 位置：相对位置； } .pin图标{ 位置：绝对位置； 宽度：50px； 高度：50px； -webkit边界半径：25px； -moz边界半径：25px； 边界半径：25px； 文本对齐：居中； 背景色：333； 颜色：fff； 最高：25%； } .明星{ 字体大小：30px； 线高：50px； } .标题容器{ 左侧填充：60px； 宽度：400px； 字体大小：24px； } ★ 这个标题不稳定。这个标题不稳定。此标题不稳定。`请在此处输入代码`
您只需使用Flexbox即可实现这一点 只需将display:flex和align items:center添加到包装器div，在您的例子中是.title-pin 使用display:flex属性的一些优点 它不再扮演一个角色，你的文字在多长时间内 .标题容器将是。 原则上，您甚至不需要为子元素设置特定的高度，但我认为在您的情况下，您希望.pin图标始终具有相同的高度和宽度，因此可以将两者都设置为50px。 .标题别针{ 位置：相对位置； 显示器：flex； 对齐项目：居中； } .pin图标{ 宽度：50px； 高度：50px； 边界半径：50%； 文本对齐：居中； 颜色：fff； 背景：2000人； 利润率：0.20px； } .明星{ 字体大小：30px； 线高：50px； } .标题容器{ 宽度：400px； 字体大小：24px； } ★ 这个标题不稳定。这个标题不稳定。此标题不稳定。`请在此处输入代码` .标题别针{ 位置：相对位置； 显示：块； 保证金：自动； } .pin图标{ 宽度：50px； 左边距：55像素； 高度：50px； -webkit边界半径：25px； -moz边界半径：25px； 边界半径：25px； 文本对齐：居中； 背景色：333； 颜色：fff； } .明星{ 字体大小：30px； 线高：50px； } .标题容器{ 左侧填充：60px； 宽度：400px； 字体大小：24px； } ★ 这个标题不稳定。这个标题不稳定。此标题不稳定。`请在此处输入代码` 将此添加到css中
.pin-icon {top: 50%; transform: translateY(-50%);}
将以下内容添加到.pin图标CSS中。希望这对你有帮助
.pin-icon {
top:50%;
margin-top:-25px;
}
感谢@Mostafa的可能重复，但是当文本超过3行时，它不能正常工作。我认为您只有这3行：这是最简单的解决方案。对于这些情况，使用flexbox是最好的方法。但是我更喜欢@Danieladona作为OP案例，因为如果你没有使用CSS预处理器和一些包含浏览器前缀的flex混合，那么使用flexbox会很烦人。