行内块元素上下错位问题

行内块上下错位的原因：

不同的标签，浏览器默认的对齐方式（vertical-align:baseline）不同，
比如图片默认顶对齐，文字默认底对齐。

所以当文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

解决方法：

添加vertical-align属性；
添加浮动float
将行内块元素改成块级元素，这样vertical-align对块级元素无效

vertical-align 属性设置元素的垂直对齐方式。

代码片.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>行内块元素上下错位问题</title><style type="text/css">div{display:inline-block;}.div1{width: 200px;height: 300px;/* 为了方便观察，设置颜色 */background: red;/*vertical-align: bottom;*/}.div2{width:200px;height: 200px;/* 为了方便观察，设置颜色 */background: #0000FF;/*把元素的顶端与行中最低的元素的顶端对齐：*//*vertical-align: bottom;*/}</style></head><body><div class="div1">div1</div><div class="div2">div2</div></body>
</html>

原图：

（即解决行内块元素上下错位的问题）：

代码片.

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>行内块元素上下错位问题</title><style type="text/css">div{display:inline-block;}.div1{width: 200px;height: 300px;/* 为了方便观察，设置颜色 */background: red;vertical-align: bottom;}.div2{width:200px;height: 200px;/* 为了方便观察，设置颜色 */background: #0000FF;vertical-align: bottom;}</style></head><body><div class="div1">div1</div><div class="div2">div2</div></body>
</html>

（即解决行内块元素上下错位的问题）

对于img 和 input 行内块元素
代码片.

/*图片 img*/
.logoImg {position: relative;width: 200px;height: 39px;left: 15%;/*vertical-align: bottom;*/}
/*input 输入框*/
.search>.search1 {position: relative;height: 29px;width: 200px;left: 55%;background: url(images/search2.jpg) right no-repeat;/*vertical-align: bottom;*/
}

原图：

代码片.

.logoImg {position: relative;width: 200px;height: 39px;left: 15%;vertical-align: bottom;}.search>.search1 {position: relative;height: 29px;width: 200px;left: 55%;background: url(images/search2.jpg) right no-repeat;vertical-align: bottom;
}

添加vertical-aglin后的图片（即解决行内块元素上下错位的问题）

vertical-align的解释

行内块元素上下错位问题相关推荐

css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
同一DIV内，两个行内块元素不对齐的解决方案
同一DIV内,两个行内块元素不对齐的解决方案参考文章: (1)同一DIV内,两个行内块元素不对齐的解决方案 (2)https://www.cnblogs.com/qfly/p/8085125.htm ...
090_块元素行内元素行内块元素空元素
1. 块元素指的是占据全部可用宽度的元素, 并且在其前后都会换行(display: block). 1.1. 定义整个文档(非常重要): <html></html> 1.2. ...
HTML基础，块级元素/行内元素/行内块元素辨析【2分钟掌握】
根据标签元素的特点可以将元素分为三类:块级元素,行内元素,行内块元素块级元素特点: 可以设定宽度和高度独自占用一行默认宽度是父元素的宽度,默认的高度是内容高度. 常见的块级元素有哪些?div p ...
php行内块,块级元素和行内块元素是什么？
在css基础当中,我们往往会遇到块元素和行内元素,块元素和行内元素也是很重要的基础知识,很多学生都感觉不重要,都不去学习,其实也是不正确的选择,下面我们来讲述一下块级元素和行内块元素是什么? 很多学生 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
html 指定对象为块元素,html内联（行内）元素、块级（块状）元素和行内块元素分类...
HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...
css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换
标签显示模式display: HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-g ...
解决行内块元素（inline-block）之间的空格或空白问题
解决行内块元素(inline-block)之间的空格或空白问题参考文章: (1)解决行内块元素(inline-block)之间的空格或空白问题 (2)https://www.cnblogs.com/ ...

行内块元素上下错位问题

行内块元素上下错位问题

行内块元素上下错位问题相关推荐

最新文章

热门文章