问

css - table-call 如何使里面的内容横排对齐

黄思悦-XHNZ_314 发布于 2022-11-07 08:39

http

html

overflow

代码演示：
http://runjs.cn/code/yb3f5f0m

可以看到我设置了display:table-call后，里面的两个100，都到了后面，这是我要的效果。
但是这两个100是纵向对齐的，而我希望的是他们能够并排对齐。我设置了很多的display都没效果。。。

我希望的效果是这两个100能够横排对齐，并且前面p标签内容的还可以自适应宽度。

HTML：

当一个人看清自己的航行路线是多么迂回曲折的，他最好依靠自己的良心作为领航员。而知道在适当的时候自动管束自己的人，人才能获得真正的心态平衡，也才可能拥有幸福的家。

100

#box{
    background-color:#fff;
    padding:1px 5px;
    display:table;
}
#box p{
    font-size:12px;
    line-height:16px;
    height:32px;
    overflow:hidden;
}
#box .rightbox{
display: table-cell;
vertical-align: middle;
}

2 个回答

修改成这样子：

#box .rightbox{
    display: table-cell;
    vertical-align: middle;
}
#box .rightbox p {
    display: table-cell;
}

试试。
这样好像就可以垂直居中了。

2022-11-12 01:38 回答

小小的梦想123

```
.rightbox p {
    display:table-cell;
    vertical-align:middle;
}
```
如上修改。

扩展如下：
```
// 父元素
.parent {
display:table
}
//子元素
.child {
display:table-cell;
vertical-align:middle;
}
```
如上代码添加属性为table-cell的块级子元素会横向布局。
http://blog.lwxyfer.com/621.html 链接是我才总结的居中布局，里面详细讲了使用table-cell 和 vertical-align的问题。
2022-11-12 01:38 回答

陈卓0561_979

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签