内联块的CSS垂直对齐不起作用
是因为内联块元素默认是按照基线对齐的。要实现垂直对齐，可以使用以下方法：
- 使用display属性：将内联块元素的display属性设置为"inline-block"，然后再设置vertical-align属性来实现垂直对齐。例如：
.inline-block-element {
display: inline-block;
vertical-align: middle; /* 或者其他垂直对齐方式，如top、bottom等 */
}- 使用flexbox布局：将内联块元素的父容器设置为flex布局，然后使用align-items属性来实现垂直对齐。例如：
.container {
display: flex;
align-items: center; /* 或者其他垂直对齐方式，如flex-start、flex-end等 */
}- 使用表格布局：将内联块元素的父容器设置为table布局，然后使用vertical-align属性来实现垂直对齐。例如：
.table-layout {
display: table;
}
.table-cell {
display: table-cell;
vertical-align: middle; /* 或者其他垂直对齐方式，如top、bottom等 */
}以上是常用的解决方法，根据具体情况选择适合的方式来实现垂直对齐。腾讯云提供的相关产品和服务与此问题无关，因此不提供相关链接。
相关·内容
1回答
我试图创建一个滚动效应，在一堆有反应的图片博客文章，提示用户点击图像。目前我有两个问题当前它看起来如下：HTML
<div class="post">
浏览 3提问于2013-12-30得票数 2
回答已采纳
我有一个简单的导航链接和移动导航图标，我所做的css。由于一个未知的原因，“图标”不是垂直居中，它靠近中心，但很少有更多的像素丢失。我认为这就是原因，但为什么我的浏览器对齐inline-block‘图标’？！看上去浏览器想要对着它，但并不完美。我不明白为什么会发生这种事，你能解释一下吗？CSS list-style: none; padding: 0;
line-he
浏览 2提问于2015-04-18得票数 1
回答已采纳
2回答
在iE和Chrome中，我的容器块是垂直居中的，但在Firefox中则不然。我不明白，因为所有的父程序都有很好的定义，所以在每个浏览器下都是可以的。也许在Mozilla下有一个特殊的工具箱，用于这种CSS，但我没有找到它。img-responsive"></a> </div>
<&
浏览 0提问于2015-09-20得票数 0
回答已采纳
2回答
我尝试将垂直对齐中间放置在列表(li标记)中，它具有显示内联块的功能，但图像不是中间对齐的。我的CSS： display: inline-block;text-align: center;
浏览 0提问于2018-04-20得票数 0
回答已采纳
1回答
我唯一能想到的办法是：
#中心Header{显示:内联块；高度: 100%；垂直对齐:中间；}#社会化链接{高度: 100%；显示:内联块；垂直对齐:中间；浮动:右；}
#中心Header{显示:内联块；高度: 100%；垂直对齐:中间；}#社会化链接{高度: 100%；显示:内联块；<e
浏览 3提问于2014-08-18得票数 0
回答已采纳
>
<article>Java</article></section>我希望我的两篇文章都是对齐的，但是从下面的截图中可以看到，只有当我的两篇文章都有文本时，<article>元素才是中心对齐的：有什么想法是什么导致了
浏览 8提问于2012-11-25得票数 39
回答已采纳
1回答
我正在尝试垂直对齐div标记中的内联元素。这是我的HTML： <div id="bar"> </div>.foo{ hei
浏览 1提问于2012-12-11得票数 0
回答已采纳
2回答
当我删除div.content:before选择器中的垂直对齐时，文本会下拉，不能完全显示，那么伪类是做什么的，为什么这样做呢？PS:是否有其他方式来实现像演示显示，即对齐的文本在中间和文字将开始在一个新的行，如果它太长。> <span>Mix Color Lace Dress</span>
<
浏览 4提问于2014-01-28得票数 0
回答已采纳
3回答
我正在尝试在div中垂直对齐ing元素。唯一的问题是img元素没有固定的高度。我尝试了将垂直对齐与表格、表格单元格、内联块和内联相结合。所有这些似乎都不起作用。有谁知道我怎样才能做到这一点？我做了一个JSFiddle来重现我的问题。image-container">
<img src="http://www.image2012.com&#x
浏览 3提问于2013-04-24得票数 2
我想显示两个具有宽度和高度并排的<div>元素.我将inline-block应用于<div>s，但左侧元素的位置很奇怪：HTML： <div id="myDivTag">content</div></body>#myDivTag,
浏览 4提问于2016-01-11得票数 5
回答已采纳
"> <div class="option"></div></div> cursor: pointer; display: inl
浏览 0提问于2016-05-06得票数 0
4回答
现在，任何有一个长名字的用户都在搞乱对齐/队形。我认为通过设置名称的大小可以做到这一点： height: 50px; text-align: center;..。我做了一个来告诉你我的意思。
我怎么才能修复它？
浏览 0提问于2013-01-07得票数 0
回答已采纳
2回答
内嵌块中的垂直锚标
、、、
你好，我需要垂直居中锚标签，我使用垂直对齐:中间，但它对我不起作用。谁能告诉我我能做什么。我使用内联块来显示和MDN引用显示垂直对齐工作的内联块元素，但它不适合我。我给出了密码看是否有人能帮上忙@import url('https://fonts.googleapis.com/css2?device-width, initial-sca
浏览 3提问于2022-05-17得票数 -1
回答已采纳
5回答
我刚接触编码和CSS的世界，最近遇到了垂直对齐属性。在阅读了大量关于它是什么的文章后，我仍然不知道它是做什么用的，什么时候使用它？我的理解是，它用于内联元素，如文本、图像等，以及表中的文本或其他内联元素。它们不能用于块元素，如div、h1等。如果我的理解是正确的，除了垂直对齐文本以表示图像或使用下标或上标之外，它还有什么其他用途
浏览 0提问于2011-05-26得票数 6
回答已采纳
为什么垂直对齐在我试图对齐的元素上不起作用？但如果我对齐了它周围的其他元素就行了？
我读过很少关于垂直对齐的文章，这些文章指出它是为对齐表或内联元素而创建的。因此，我在代码中将所有元素设置为内联块。当我尝试垂直对齐菜单链接时，它几乎什么也不做.如果我试图使1框与菜单链接的左边
浏览 1提问于2019-03-22得票数 0
回答已采纳
我有一个很简单的导航条，有五个按钮。x </div></a></div>
下面是我用来尝试在悬停时创建按钮按下效果的CSS)，并将按钮向下移动以取代阴影所在的区域，从而给出按钮一直向下按的外观。
浏览 1提问于2014-07-30得票数 0
回答已采纳
目前，我正试图将按钮与“..row”的其余部分垂直居中。
这是我目前所拥有的。我尝试过将style=“垂直对齐:中心”添加到不同的元素中，但是按钮不会移动。我找到的唯一解决方案是用类似于“top:100 it；”之类的东西向下移动，但这当然不是一个有效的解决方案，因为它并不适用于所有屏幕大小。按钮在它们自己的div (.col.s3)中，这有助于在.row上水平地定位它们。这里的对象是将两个外部按钮垂直</e
浏览 1提问于2015-03-10得票数 1
回答已采纳
嘿，伙计们，我只是在玩一些CSS，我刚开始接触CSS，我做了以下简单的演示： <label for="test">Name</label> //vertical-align: middle;现在标签“看起来”与输入完全垂直对齐，我想这是因为默认<em
浏览 3提问于2015-05-26得票数 0
回答已采纳
2回答
我有一堆li元素，它们是用内联块定位/显示的，因此是垂直对齐的。但是这些都不起作用，我也不明白为什么，因为这对这些嵌套元素来说是很有意义的。foo">
<label for="foo&
浏览 4提问于2015-09-08得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
