gpt4 book ai didi

html - CSS:img 的行内 block 对齐

转载 作者:太空宇宙 更新时间:2023-11-03 22:00:23 25 4
gpt4 key购买 nike

无论出于何种原因,此图像都会使标记的其余部分在其容器内不对齐,尽管它已设置为显示内联 block 。:

http://jsfiddle.net/ncQXD/

对于你们来说应该是一些简单的东西。对我来说,我已经花了几天时间尝试解决这个问题。

顺便说一句,我不想​​使用 float 。我不完全知道如何控制他们的古怪,也没有时间学习它。如果您能请不要使用它们,我将不胜感激。但是,如果你带我去一个涵盖他们所有不幸事件等的类(class),我可以参加关于花车的速成类(class)。

现在,我需要坚持使用非 float css。

附言。边框只是为了“调试”,真的不需要

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css_test2.css" />
</head>
<body>
<div id="header">
<img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo">
<a href="#" id="logo_txt">Title goes here</a>
<span id="social_media">Social media links</span>
</div>
</body>
</html>

CSS:

#header {
border: 1px solid red;

width: 800px;
height: 123px;
margin: 0px auto;
padding: 0px;

background-color: rgb(181, 230, 29);
}

#logo {
border: 1px solid red;
display: inline-block;

width: 172px;
height: 123px;
}


#logo_txt {
border: 1px solid black;
display: inline-block;

width: 100px;
height: 123px;
}
#social_media {
border: 1px solid black;
display: inline-block;

width: 300px;
height: 123px;
text-align: right;
}

最佳答案

解决此问题的最快方法是将 vertical-align: top 添加到 #logo 样式。

关于html - CSS:img 的行内 block 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10925325/

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