当前位置：文江博客话题详情

如何垂直对齐行内元素

发布于 2024-10-22 17:55:18 字数 73 浏览 2 评论 0原文

我有这个锚标记，其间有文本以垂直对齐文本。我正在使用这个CSS属性vertical-align: middle。不过什么也没有发生。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栀子花开つ 2024-10-29 17:55:18

您可以将其设置为 inline-block 并为其指定 line-height：

a {
    line-height: 50px;
    display: inline-block;
}

JSFiddle 以及工作示例：http://jsfiddle.net/KgqJS/

You can make it inline-block and give it a line-height:

a {
    line-height: 50px;
    display: inline-block;
}

JSFiddle with working example: http://jsfiddle.net/KgqJS/

回复收藏 0 原文

眼睛会笑 2024-10-29 17:55:18

vertical-align 仅适用于具有 display: table-cell 的元素，并且 vertical-align 不支持该属性值。 IE8。

已知文本

如果您知道要居中的文本，那就相当容易了。你有两个选择。

<style type="text/css">
    #container {
        padding: 10px 0;
    }
</style>
<div id="container">
    Example of some lovely<br />
    multiline text.
</div>

您可以使用 CSS 的 padding 来添加顶部和底部的内边距，使文本显示在中间。这对于多行文本很有用。

<style type="text/css">
    #container {
        height: 100px;
        line-height: 100px;
    }
</style>
<div id="container">
    Example
</div>

您可以利用行高属性使文本垂直居中。这仅适用于一行文本。您可以猜测如果超过 1 个，会发生什么。

动态多行文本

事情开始变得有些棘手，可能会让您急需表格。

<style type="text/css">
    #container {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div id="container">
    <?php echo $content; ?>
</div>

<的解决方法IE8。

来源。

vertical-align only works on elements with display: table-cell, and that property value isn't supported in < IE8.

Known text

If you know the text to be centred, it is rather easy. You have two options.

<style type="text/css">
    #container {
        padding: 10px 0;
    }
</style>
<div id="container">
    Example of some lovely<br />
    multiline text.
</div>

You can use CSS's padding to add padding top and bottom, to make the text appear in the middle. This is useful for multiline text.

<style type="text/css">
    #container {
        height: 100px;
        line-height: 100px;
    }
</style>
<div id="container">
    Example
</div>

You can exploit the line-height property to make the text vertically centred. This only works with one line of text. You can guess what happens if there is more than 1.

Dynamic multiline text

Here is where things start to get somewhat tricky, and may have you crying for tables.

<style type="text/css">
    #container {
        display: table-cell;
        vertical-align: middle;
    }
</style>
<div id="container">
    <?php echo $content; ?>
</div>

Workaround for < IE8.

Source.

回复收藏 0 原文

做个ˇ局外人 2024-10-29 17:55:18

<div><p>test test test test<p></div>

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}


p{
    height:30px;
    position:absolute;
    top:50%;
    margin-top:-15px; /* negative half of height*/
}

检查工作示例 http://jsfiddle.net/Z2ssq/1/

<div><p>test test test test<p></div>

div{
    border:1px solid red;
    width:400px;
    height:400px;
    position:relative;
}


p{
    height:30px;
    position:absolute;
    top:50%;
    margin-top:-15px; /* negative half of height*/
}

Check working example at http://jsfiddle.net/Z2ssq/1/

回复收藏 0 原文

~没有更多了~