gpt4 book ai didi

css - 无法让内联 block 对齐

转载 作者:行者123 更新时间:2023-11-28 13:16:04 25 4
gpt4 key购买 nike

任何人都可以解释为什么“.name-wrap”div 与此 fiddle 中的图像不对齐吗? .

<!DOCTYPE html>
<html>

<style>

.element-wrap{
display:block;
background:blue
}

.name-wrap{
display:inline-block;
background:yellow
}

.model-name-wrap{
display:block
}

.make-name-wrap{
display:block
}

img{
display:inline-block
}

</style>

<body>
<div class="element-wrap">
<img height="50" width="50" src="https://fbcdn-photos-h-a.akamaihd.net/hphotos-ak-prn1/c8.0.50.50/p50x50/1012747_10100658463725213_1269934886_s.jpg">
<div class="name-wrap">
<div class="model-name-wrap">Honda</div>
<div class="make-name-wrap">Civic</div>
</div>

最佳答案

对于 img 标签和 .name-wrap

你需要使用 vertical-align: middle;

Demo

需要修改的相关CSS:

.name-wrap{
display:inline-block;
background:yellow;
vertical-align: middle;
}

img{
display:inline-block;
vertical-align: middle;
}

关于css - 无法让内联 block 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17499844/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com