【问题标题】:Not able to make div center align using display:table无法使用 display:table 使 div 居中对齐
【发布时间】:2017-05-20 20:34:11
【问题描述】:

我正在使用显示表格和表格单元格垂直对齐中间来使 div 居中对齐。但中心 div 不位于中心。

小提琴:Here

CSS:

.landing-right {
    position: relative;
    padding: 50px 0px;
    float: left;
    display: table;
    width: 365px;
    height: 100%;
    margin-left: -70px;
}
.landing-img {
    height: 420px;
    position: relative;
    float: left;
    width: 100%;
    background-repeat: no-repeat;
    border: 15px solid #fff;
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div class="landing-right">
            <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);">                
</div>

【问题讨论】:

    标签: html css


    【解决方案1】:

    .landing-right有几个问题:

    • 它有float: left。如果需要水平居中,则不应定义此 CSS 规则。
    • 它有margin-left: -70px,使它向左偏移70px。它不是必需的,如果元素需要水平居中,则应将其删除。
    • 没有定义 CSS 规则来水平居中元素,最简单的实现方法是使用 margin: 0 auto

    对于垂直居中,代码运行良好。

    这是一个代码 sn-p,它使图像在您的情况下水平和垂直居中:

    .landing-main {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background: #fefefe;
    }
    .landing-right {
        position: relative;
        padding: 50px 0px;
        display: table;
        width: 365px;
        height: 100%;
        margin: 0 auto;
    }
    .landing-img {
        height: 420px;
        position: relative;
        float: left;
        width: 100%;
        background-repeat: no-repeat;
        border: 15px solid #fff;
        display: table-cell;
        vertical-align: middle;
    }
    .landing-inner {
        width: 100%;
        box-shadow: 0 2px 9px 2px rgba(0,0,0,0.4);
        padding: 40px 0px;
        min-height: 100vh;
        background: #f8f8f8;
    }
    <div class="landing-main">
    
    <div class="landing-inner">
    <div class="landing-right">
                <div class="landing-img" style="background-image: url(&quot;https://cdn.filestackcontent.com/Cvj2tN3S7ikTu981vJVp&quot;);">
                
                </div>
            </div>
            </div></div>

    【讨论】:

      【解决方案2】:

      您应该使用 margin: auto; 作为静态宽度 div 并删除 float: left;。它将水平居中内部。 但是垂直居中对齐更难,你应该使用this one之类的东西。

      编辑:你没有提到哪个 div 需要居中。这是.landing-right中间对齐的解决方案

      【讨论】:

        【解决方案3】:

        试试这个代码 sn-p:

        .landing-right {
            position: relative;
            display: table;
            width: 365px;
            margin: 0 auto;
         }
        

        【讨论】:

        • 来自审核队列:我可以请求您在您的答案周围添加更多上下文。仅代码的答案很难理解。如果您可以在帖子中添加更多信息,这将对提问者和未来的读者都有帮助。
        【解决方案4】:

        在你的css类登陆-权,你需要做出改变,应该是这样的-

        .landing-right {
            position: relative;
            padding: 50px 0px;
            display: table;
            width: 365px;
            height: 100%;
            margin-left: auto;
        }
        

        通过保持浮动:左,您使您的 div 粘在屏幕的左侧,并在其顶部以 margin-left: -70px;永远不会让您的 div 进入中间,将其保持为 auto 以便 div 可以拥有带边距的范围,并且没有浮动的左 div 将直接进入屏幕中间。

        【讨论】:

          猜你喜欢
          • 2011-03-13
          • 2016-08-17
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2011-02-25
          • 1970-01-01
          • 2018-10-16
          相关资源
          最近更新 更多