【问题标题】:How to vertical align elements cross-browser?如何跨浏览器垂直对齐元素?
【发布时间】:2011-05-24 23:19:19
【问题描述】:

我正在使用 vertical-align: middle 属性进行垂直对齐,它在 Chrome 中工作,但在 IE 中不工作。

【问题讨论】:

  • 什么版本的IE?能贴出相关的 HTML 和 CSS 代码吗?
  • .login_sign_up_text_box_td { 字体:Arial,Helvetica,无衬线;字体大小:18px;颜色:#000;垂直对齐:中间;高度:40px;宽度:200px;我正在使用 IE 7
  • 您的样式表中是否还有其他与此属性冲突的 CSS 属性?
  • 如果没有完整的标记或链接,我们所说的一切都只是一个疯狂的猜测。

标签: html css google-chrome internet-explorer vertical-alignment


【解决方案1】:

Supposedly,IE8+ 支持vertical-align,但 IE7- 支持有问题。对于旧版浏览器,您可能需要尝试将元素容器的 CSS 设置为 top: 50%top: -50%

【讨论】:

  • 如果路过的投票者能发表评论并解释自己,那就太好了。
【解决方案2】:

如果你想在你的框中放置一个单行文本,例如标题标题,而不是使用line-height

例如一个 200px 宽和 40px 高的盒子:

.the_box{
width: 200px;
height: 40px;
line-height: 40px;
}

它简单、优雅且跨浏览器。如果您的文本超过 200 像素,则此方法将不起作用。

【讨论】:

    【解决方案3】:

    style="valign:middle; vertical-align:middle;"
    

    较新版本的 IE 将选择 valign:middle 并忽略 vertical-align:middle

    Firefox、Chrome、Safari 等所有其他浏览器都会选择 vertical-align:middle 并忽略 valign:middle

    【讨论】:

      【解决方案4】:

      我也遇到过类似的问题

      我有以下

      <div>
        <span> some text </span>
      </div>
      

      这一切都在表格的标题中。

      我能够通过将以下内容添加到跨度来解决此问题

      <div>
        <span style="position: absolute; padding-top:1px;"> some text </span>
      </div>
      

      【讨论】:

        【解决方案5】:

        我的同事创建了一个日历表,我也遇到了这个问题。日历在 Chrome、Firefox 中很好看,但是每天左上角的日期文本被截掉一半。我删除了垂直对齐属性并将其替换为位置。见下文。

        原始 CSS:

        .dayText {
            vertical-align: text-bottom;
        }
        

        我的 CSS 修复:

        .dayText {
            position: relative;
            top: 10px;
            left: 0px;
            height: inherit; 
        }
        

        【讨论】:

          【解决方案6】:

          只需添加以下内容: display: table-cell;

          【讨论】:

            【解决方案7】:

            你试过 flexbox 吗?这是我使用的,我没有很多(如果有的话)兼容性问题,IE 可能有点挑剔,但它绝对支持它。

            要使项目居中,请将元素的容器设置为 display: flex; 并添加 align-items: center; 以使它们在容器内垂直居中。您也可以使用justify-content: center; 将它们水平居中

            您可以在这里看到它得到广泛支持:https://caniuse.com/#feat=flexbox

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 2016-02-03
              • 2019-08-06
              • 1970-01-01
              • 2015-07-15
              • 1970-01-01
              • 1970-01-01
              • 2015-05-24
              相关资源
              最近更新 更多