在固定的 Dimensional div 中水平和垂直居中内容

Posted 2023-03-05

【中文标题】在固定的 Dimensional div 中水平和垂直居中内容

【英文标题】：centering of content horizontal and vertical in a fixed Dimensional div

【发布时间】：2012-08-31 04:59:30

【问题描述】：

我想拥有如下内容 对于第一个，我使用 line-height 40px

对于第二个，我使用 line-height 120px

这意味着随着内容的变化，我必须更改行高 有没有办法在固定维度的 div 中进行这种类型的居中而不 换班

我可以在没有 javascript 的情况下做到这一点吗？ 如果我将高度用作 120px，我会得到这样的 div （我不想要这个）

div的样式是

<style>
 .rectangle 
        postion:absolute;
    box-shadow: 10px #333;
    border-radius: 23px;
    border-top-right-radius: 0;
    border:6px solid;
    block:inline;
    line-height: 123.6px;
    width:200px;
    background-color: #444;
    float: left;
    margin: 5px;
    text-align: center;
    color:white;
   font-weight:900;

    text-decoration:none;

</style>

【问题讨论】：

我们能看到你做的代码吗...？

感谢您的评论。我已经添加了那个css样式

css.flepstudio.org/en/css-tutorials/…

***.com/questions/5421334/…

jakpsatweb.cz/css/css-vertical-center-solution.html

【参考方案1】：

垂直对齐仅在 table>tr>td 中完美工作。对于其他人，您也可以尝试从顶部和底部提供填充。这不需要任何垂直对齐，并且效果最好。

谢谢 拉胡尔

【参考方案2】：

即使高度和 div 中的内容发生变化，遵循 css 也能正常工作

.rectangle 
      
        height:auto;
        postion:absolute;
        box-shadow: 10px #333;
        border-radius: 23px;
        border-top-right-radius: 0;
        border:6px solid;
        block:inline;
        width:200px;
        background-color: #444;
        float: left; padding:20px 10px 20px 10px;
        margin: 5px;
        text-align: center;
        color:white;
        font-weight:900;
        text-decoration:none;
    

【讨论】：

block:inline 用于将块元素更改为内联元素w3schools.com/cs-s-ref/pr_class_display.asp

块：内联； ?没有这样的财产。也许显示：块；，显示：内联块；

【参考方案3】：

使 .rectangle 元素显示为表格，内部文本段落显示为表格单元格。然后您可以轻松地垂直放置您的段落。

这是一个工作示例：http://jsfiddle.net/ktzUn/

【讨论】：

请注意，这在 IE7 及以下版本中不起作用，并且 IE8 会出现 display:table; 的奇怪行为

随着内容的增加，div的高度也在增加jsfiddle.net/ktzUn

大卫，IE7 及以下版本确实如此； IE8 需要一个!DOCTYPE。 Madhu13，你期待什么？

【参考方案4】：

垂直居中很棘手。 CSS 技巧的 Chris Coyier 对此有一篇很棒的文章 - http://css-tricks.com/centering-in-the-unknown/

我个人的偏好是 ghost 伪元素，但它只在 IE8+ 中可用，因此如果需要旧版 IE 支持，您可能需要查看其他一些示例。

这是一个有效的小提琴 - http://jsfiddle.net/tommarshall/eGJQC/3/