html a纵向 位置,关于html：如何在span标签内垂直对齐内容？

如何使" x"在跨度的中间垂直对齐？

.foo {

height: 50px;

border: solid black 1px;

display: inline-block;

vertical-align: middle;

}

x

使用line-height:50px;代替高度。这应该够了吧 ;)

外观极好！它适用于任何类型的标签。就我而言，工作于

。

问题是文本换行时。如果使用两行，则该跨度将以100px的高度呈现。

不适用于多行文字

如果您的文字换行，请尝试我的答案@NorbertoYoan

@Sumit的同上(由于SO注释问题而重复)

这不应该是票数最高的答案，根据内容，解决方案可能会给出其他一些不希望的结果。

有史以来最好的答案！

请注意，如果span中的句子很长，并且由于没有足够的空间而导致换行，则line-height方法将失败。在这种情况下，您将有两条线，其间隙与属性中指定的N个像素的高度相同。

当我想在右侧显示垂直居中的文本以在响应式Web应用程序中工作时，我陷入其中。作为基础，我使用Eric Nickus和Felipe Tadeo建议的方法。

如果要实现：

和这个：

.container {

background: url("https://i.imgur.com/tAlPtC4.jpg" ) no-repeat;

display: inline-block;

background-size: 40px 40px; /* image's size */

height: 40px; /* image's height */

padding-left: 50px; /* image's width plus 10 px (margin between text and image) */

}

.container span {

height: 40px; /* image's height */

display: table-cell;

vertical-align: middle;

}

This is a centered sentence next to an image

什么是动态高度

如果需要多行，这是最简单的方法。将span的文字换成另一个span，然后用line-height指定其高度。多行的技巧是重置内部span的line-height。

YOUR TEXT HERE

.textvalignmiddle {

line-height: /*set height*/;

}

.textvalignmiddle > span {

display: inline-block;

vertical-align: middle;

line-height: 1em; /*set line height back to normal*/

}

演示

当然，外部span可以是div或其他

与任何其他内联元素一样，span可以包含任何HTML内联元素。无论如何，我写道textvalignmiddle在必要时可以是div(如果您不喜欢使用spans，则可以将其设置为display:inline;)。

我的意思是他们不应该拥有。它们用于包含文本。否则使用div。

span是html的通用内联容器，并没有暗示仅是文本。 `它可用于对元素进行分组以进行样式设计...`。我建议您先阅读规范，然后再将您的个人编码标准声明为事实

无论哪种方式，这种对话方式在技术上都不是问题的建设性内容，也不是SO中的注释是针对什么的

也为我工作。使用的元素与跨度不同。

使用以下doctype标记对我不起作用：

如果您实际上使用过渡元素，那么为什么要先麻烦doctype IMO。您为什么需要声明文档过渡的任何原因？

flexbox方式：

.foo {

display: flex;

align-items: center;

justify-content: center;

height: 50px;

}

因为.foo是跨度display: flex-inline更适合

您是说" inline-flex"吗？

CSS垂直居中图片和文字

我已经为垂直图像中心和文本创建了一个演示，我也对Firefox，chrome，safari，Internet Explorer 9和8进行了测试。

这是非常简短的CSS和html，请检查以下代码，您可以在screenshort上找到输出。

的HTML

的CSS

.frame {

height: 160px;

width: 160px;

border: 1px solid red;

white-space: nowrap;

text-align: center; margin: 1em 0;

}

.frame::before {

display: inline-block;

height: 100%;

vertical-align: middle;

content:"";

}

img {

background: #3A6F9A;

vertical-align: middle;

}

产量

在此处输入图片说明

我需要此链接，因此我用a-tag和div包裹了span，然后将span标签本身居中

的HTML

Home

的CSS

.tester{

display: inline-block;

width: 9em;

height: 3em;

text-align: center;

}

.tester>span{

position: relative;

top: 25%;

}

为此，我讨厌弄乱CSS，当我在这里遇到您的答案时，我整日都在尝试垂直放置元素的中心。您是救生员！

这对我有用(Keltex说的也一样)

.foo {

height: 50px;

...

}

.foo span{

vertical-align: middle;

}

middle!

将padding-top设置为适当的值以向下推x，然后从高度中减去padding-top的值。

不幸的是，vertical-align css属性无法满足您的期望。本文介绍了两种使用CSS垂直对齐元素的方法。