gpt4 book ai didi

html - 在 DIV 中居中文本和图像的组合

转载 作者:行者123 更新时间:2023-11-28 15:16:21 24 4
gpt4 key购买 nike

我尝试将容器 DIV 中的文本和图像串联居中(水平和垂直)。这是代码:

<!DOCTYPE html>
<html>
<head>
<style>
#myBox {display:block; width:300px; height:100px;
text-align:center; font-size:20px; line-height:500%;
background-color:yellow;}
#myImg {display:block; width:33.33%; height:100%;}
</style>
</head>
<body>
<div id="myBox">
My text
<img id="myImg" src="red100x100.jpg" />
</div>
</body>
</html>

文本确实居中,但图像出现在新行中。

努力做到这一点:
enter image description here

但我明白了:
enter image description here

编辑:

这类似于 center image next to two lines of text responsively , 但后者也处理 margin:auto 的影响,而这个问题没有。

最佳答案

1) display:inline-block; 用于 #myImg

2) 使用 vertical-align: middle; 将文本垂直居中。

#myImg {
display:inline-block;
vertical-align: middle;
//Other code...
}

#myBox {
display:block;
width:300px;
height:100px;
text-align:center;
font-size:20px;
background-color:yellow;
}

#myImg {
display:inline-block;
width:33.33%;
height:100%;
vertical-align: middle;
}
<div id="myBox">
My text
<img id="myImg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA" />
</div>

关于html - 在 DIV 中居中文本和图像的组合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47136181/

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