如何在标签内垂直对齐某个元素？

16 浏览
0 Comments

如何在标签内垂直对齐某个元素？

如何使 \"x\" 在 span 元素的中间垂直对齐？\n

.foo {
    高度：50px;
    边框：1px 黑色实线;
    显示：内联块;
    垂直对齐：中间;
}

   x

0

3 答案

0 Comments

问题的出现原因：用户想要在一个标签中垂直对齐内容，但是默认情况下，标签中的内容是默认垂直居中对齐的。

解决方法：将要对齐的文本包裹在另一个标签中，并使用line-height属性来指定其高度。多行文本的关键在于重置内部标签的line-height属性。

示例代码如下：


  YOUR TEXT HERE



.textvalignmiddle {
    line-height: /*设置高度*/;
}
.textvalignmiddle > span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1em; /*将行高设置回正常值*/
}

在这个解决方案中，外层的标签也可以是

或其他行内元素。另外，标签可以包含任何HTML行内元素。

要在标签中垂直对齐内容，可以通过包裹一个内部标签并设置line-height属性来实现。使用display:inline-block和vertical-align:middle属性可以实现垂直居中对齐。

0
0 Comments

问题的出现原因是作者想要在一个响应式网页应用中实现一个图像和垂直居中文本并排显示的效果。作者参考了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

这段代码使用了`display: table-cell`和`vertical-align: middle`属性来实现文本的垂直居中。通过将`span`元素设置为`display: table-cell`，可以使其表现类似于表格单元格，然后使用`vertical-align: middle`将文本垂直居中。

这样，作者成功地实现了图像和垂直居中文本并排显示的效果。

0
0 Comments

问题的出现原因是希望在标签内垂直对齐内容，但直接设置height属性无法实现预期的效果。解决方法是使用line-height属性代替height属性，并将其设置为所需的高度值。这样可以实现内容的垂直对齐。以下是一些用户的回答和讨论：

1. 使用line-height:50px;代替height属性，这样可以解决问题。

2. 另一个用户表示这种方法适用于任何类型的标签，包括标签。

3. 问题在于当文本换行时，这个标签的高度会变为100px。另一个用户建议尝试他给出的解决方案。

4. 由于SO评论的问题，有用户重复了之前的回答。

5. 有用户表示这不应该是最受欢迎的答案，因为解决方案可能会导致其他不期望的结果，取决于内容的情况。

通过使用line-height属性，我们可以在标签内垂直对齐内容。这种方法适用于各种标签，并且可以解决文本换行导致的高度问题。然而，需要注意解决方案可能会有其他不期望的结果，具体取决于内容的情况。

0