CSS行内(inline)元素同行放置时，垂直对齐差异

最新推荐文章于 2022-02-06 03:45:00 发布
最新推荐文章于 2022-02-06 03:45:00 发布
阅读量1.3k 收藏
点赞数 1
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allenchang1987/article/details/8673480
版权
以下代码在不同浏览器中呈现不同样式 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style>
		.logo{display:block;width:54px;height:153px;background:url(http://ww1.sinaimg.cn/square/76591c14gw1e2p567sqqaj.jpg);float:left;}
		.input{display:block;height:150px;float:left;}
		.btn{display:block;height:150px; float:left;}
		.tips{display:block;height:150px;background:#cccccc;float:left;}
	</style>
</head>
<body>
    <div class="row"> 
	 <span  class="logo"></span> 
	 <input class="input" value="测试数据" /><button class="btn">确定</button><span class="tips">提示内容</span>  
	 </div>
   </body>
</html>
解决办法：全部加上float：left,显出垂直对齐差异，目前只想到这种办法，各位如有高见，还望指正。
卤蛋哥
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS系列——行内块inline-block元素之间出现空白间隙原因及解决办法
bidang3275的博客
11-29 1032
行内块inline-block元素之间出现空白间隙原因及解决办法基本布局产生间隙的原因解决方法【7个】方法1：行内元素写在一行方法2：行内元素之间加上空白注释方法3：父元素的 `font-size` 设置为 `0`，子元素单独设置 `font-size`方法7：给父元素设置【负字符间距】 或 【负单词间距】，行内子元素再设置为 `0` 基本布局 <div class="container clearfix"> <div class="item item1"></d
同一行元素顶端对齐的方法
沉迷学习 日渐消瘦
09-12 1万+
1.同一行的行内块状元素inline-block默认的都是顶端对齐 <style> <span style="white-space:pre"> </span>.div1,.div2,.div3{display:inline-block;width:100px;height:} .div1{height:100px;background:#cc...
块级|行内元素|两元素垂直对齐|超出省略
qq_41828329的博客
09-01 383
块级元素|行内元素|两元素垂直对齐 块级元素可以通过设置两个都为float：left实现显示在同一行; 两个元素的话，可以设置宽度各为50%实现垂直对齐; 多个元素垂直对齐，通过设置每部分不同宽度实现垂直对齐； inline-block:既具有行内元素的特性（可以显示在一行），也具有块级元素特性（可以设置宽高）； inline行内元素不能设置宽高，按照元素的宽度一行排列； white-space：段落中文本不进行换行； 超出三行省略 单行文本一处显示省略号： .textOVerFlow { overflow
css解决并排的内联区块不对齐的问题
Tessa_zzl的博客
04-16 945
css解决并排的内联区块不对齐的问题 问题分析：两个并排的inline-block在同一行并排的时候，经常出现后面的一个块要比前一个靠下，这里用margin和padding都无法解决该问题。 解决方法：在两个区块里面重新定义vertical-align属性 值 描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super ...
css垂直方向对齐_看不见的力：对齐，方向和焦点
Web design 教程小屋
07-07 303
设计充满了“无形的力量”，所有这些都有助于进行清晰清晰的沟通。 如果您不愿仅仅获得正确的字体或仅选择正确的颜色组合，那么如果您不注意这些看不见的力量，那么您的设计将惨遭失败。 这是关于这些力的由三部分组成的系列文章中的第一篇，因此让我们从对齐，方向和聚焦开始。 介绍“元素” 要通过设计的无形力量真正地思考，您需要停止将设计视为字体，颜色，图像和文本，而开始将所有这些事物视为“元素”。 ...
三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block
C.
02-06 1081
文章目录三分钟快速了解CSS Display的属性：Block,Inline,Inline-BlockBlockInlineInline-blockBlock,Inline,Inline-Block的左右对齐方法 三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block 元素的类型可以分为块级元素和行内元素两大类，但是还有一种比较特殊的元素：行内块级元素。 Block 块级元素就是在网页中以块的形式出现的，以块的形式出现的意思就是元素显示为矩形区域.除了<div&
解决 display:inline-block 左右间距问题 & 上下不对齐问题
BigOrange的博客
08-02 2747
一 、左右间距问题.h-div{ width:100px; height: 50px; background: plum; border: 1px solid darkslateblue; display: inline-block; }<div class="h"> <div class='h-div'></div> <div class='
利用vertical-align:middle实现行内元素的水平垂直居中对齐
09-25
根据W3C标准，`vertical-align`属性用于设置行内元素（inline）或表格单元格（table-cell）的垂直对齐方式。它定义了元素的基线相对于行内元素所在行的基线的垂直对齐。该属性接受多种值，例如`middle`、`top`、`...
css将两个元素水平对齐的方法(兼容IE8)
09-22
在CSS布局中，水平对齐两个元素是一项常见的需求，尤其在设计响应式页面或考虑兼容老版本浏览器（如IE8）时更为重要。本篇文章主要介绍三种方法来实现这一目标，确保在IE8中也能正常工作。 方法一：浮动元素（Float...
CSS实现同一行的图片和文字垂直居中对齐的方法
09-25
vertical-align 属性主要是用来设置行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 首先，让我们来了解 vertical-align 属性的基本使用。它有多个值可以选择，比如 baseline（默认值，元素基线...
给行内块元素设置行高无法垂直居中.zip
10-25
在处理行内块元素（inline-block elements）时，我们可能会遇到一个常见的问题：无法通过设置行高（line-height）来实现元素的垂直居中对齐。本篇文章将深入探讨这个问题，并提供解决方案。 行内块元素是一种特殊的...
css的inline-block布局方式对齐问题
qq_25349323的博客
04-12 2989
今天在实现百度前端技术学院的如下案例时遇到了div上下对齐问题。 针对如下左右两栏布局，本来使用将两栏各自div的display设置为inline-block方式来实现，为了左边高度与右边对齐，直接量出右边div按照像素高度赋给左边。 但是左边元素竟然出现在了下边，没有与右边上下对齐。 后来经过百度与实验发现，将设置为inline-block时候，div并不能根据div边缘来对齐，而是根据里面...
行内元素float:left后是否变为块级元素？
LuckXinXin的博客
10-09 421
行内元素设置成浮动之后变得更加像是inline-block（行内块级元素，设置成这个属性的元素会同时拥有行内和块级的特性，最明显的不同是它的默认宽度不是100%），这时候给行内元素设置padding-top和padding-bottom或者width、height都是有效果的 ...
HTML中input和img标签元素同行水平对齐
bestforxu的博客
03-13 9328
为两者添加同一属性样式，vertical-align:middle;说明：vertical-align 属性用以设置元素的垂直对齐方式，middle（更多值见css参考手册）表示把此元素放置在父元素的中部
inline-block的上下排列对齐问题
Start -ZJ的博客
08-10 2118
今天使用inline-block想在一个div里上下排列两个p元素，都是怎么排都不对。 如图： 具体的H5代码： <div class="modify-rank-install"> <ul> <li class="modify-rank-install-big"><div><p>KKKKKK</p...
inline-block垂直对齐问题
逆行者
03-29 4523
当给某元素设置display:inline-block属性后，有时会出现垂直对齐问题。解决办法：设置vertical-align: top;图片下边的空白也可以如此解决~
HTML中＜table＞标签属性，1.水平对齐和2.垂直对齐。（表格）
热门推荐
努力努力再努力
03-06 3万+
表格属性（水平对齐和垂直对齐） 北京 上海 深圳 广州
两个同一行的元素的对齐
zzj19990913的博客
02-03 674
背景： 我把两个div设置成了inline-block，于是这时是默认在同一行的，但是这时候的图片的大大小会导致两个在视觉上不在同一条水平线上。刚开始我是对单个的设置margin-top属性，但是发现两个div同时下降了，原来是inline-block会迷人这两个div会在同一个水平线上，设置了margin-top就会使两个同时下降。这时候就想到了将这个脱离文档流来设置高度，即position...
div下同行多元素右对齐
u014686405的博客
09-28 2万+
方法一： float:right 此外，浮动还会使得布局更紧凑（没空隙） hello hi 效果图如下： 方法二： display:inline-block+text-align:right text-align:right影响的是其下的行内元素或文字，所以inline-block使得div具有了行内元素的特性，可以右对齐 hello hi 效果图如下：
css行内块元素水平居中
最新发布
09-06
在CSS中，要使行内块元素水平居中，通常的做法是将父元素设置为文本居中对齐，然后将子元素设置为`display: inline-block;`。这样做可以使得行内块元素表现得像文本一样，接受父元素的文本对齐属性的影响。具体步骤如下： 1. 将父元素的`text-align`属性设置为`center`，这样可以使所有内联内容（包括行内和行内块元素）水平居中。 2. 将要居中的行内块元素的`display`属性设置为`inline-block`。这样，元素既保持了块级元素的特性（如设置宽度和高度），又能像内联元素一样在行内显示。 3. 如果需要，可以调整行内块元素的宽度，确保它们在父元素内正确居中显示。 示例代码如下： ```css .parent { text-align: center; } .child { display: inline-block; /* 其他样式，如宽度和高度 */ } ``` ```html <div class="parent"> <div class="child">元素1</div> <div class="child">元素2</div> <!-- 更多的行内块元素 --> </div> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值