Question

我无法理解为什么左侧面板上的文字会排在首位？

以及如何在悬停的背景前移动链接文字？

<html>
<head>
    <title>ssssssss</title>

    <style>
        html, body{
            height: 100%;

        }
        .flat_menu_wrap{
            display: table;
            width: 75%;
            height: 50%;
        }
        .flat_menu_wrap div{
            text-align: center;
            vertical-align: middle;
        }
        .flat_menu_wrap a{
            vertical-align: middle;
            color: #f00;
            font-size: 15px;
            font-weight: 600;
            display: block;
            height: 100%;
        }

        .f_r_wrap{
            width: 100%;
            height: 100%;
        }
        .flat_cell_l{

            display: table-cell;
            width: 40%;
            background-image: url("http://numberimage.ru/img/tst/wood.png");
        }
        .f_r_t_wrap{
            display: table;
            width: 100%;
            height: 100%;
        }
        .f_c{
            position: relative;
            display: table-cell;
            background-size: cover;
            min-height: 100px;
        }

        .f_r_t_1{
            background-image: url("http://numberimage.ru/img/tst/furnit.png");
        }
        .f_r_t_2{
            background-image: url("http://numberimage.ru/img/tst/frezer.png");
        }

        .f_r_b_wrap{
            display: table;
            width: 100%;
            height: 100%;
        }
        .f_r_b_wrap > div{

            background-size: cover;
            min-height: 100px;

        }

        .f_t{
            display: table;
        }
        .f_r{
            display: table-row;
        }
        .f_r_b_1{
            background-image: url("http://numberimage.ru/img/tst/metal.png");
        }
        .f_r_b_2{
            background-image: url("http://numberimage.ru/img/tst/tools.png");
        }
        .f_r_b_3{
            background-image: url("http://numberimage.ru/img/tst/repair.png");
        }

        .f_s_a{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left: 0;

            z-index: 1;
        }
        .f_s_a:hover{
            background-color: rgba(129, 129, 129, 0.38);
        }

        .f_t_m{
            width: 100%;
        height: 100%;
        }
    </style>
</head>
<body>
<div class="flat_menu_wrap">
    <div class="f_t f_t_m">
    <div class="f_r">
        <div class="flat_cell_l f_c">

            <a href="/go.html">wodd dfdfd dfd</a>
        </div>

        <div class="f_c">
            <div class="f_r_wrap f_t">
                <div class="f_r">
                    <div class="f_c">
                        <div class="f_r_t_wrap">
                            <div class="f_r">
                                <div class="f_r_t_1 f_c">
                                    <a class="f_s_a" href="/go776.html"><span></span></a>
                                    <a href="/go35345.html">wodd dfdfd dfd</a>
                                </div>
                                <div class="f_r_t_2 f_c">
                                    <a href="/5533go.html">reload answer next</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <div class="f_r">

                <div class="f_c">

                    <div class="f_r_b_wrap">
                        <div class="f_r">
                            <div class="f_r_b_1 f_c">
                                <a href="/333go.html">wodd dfdfd dfd</a>
                            </div>
                            <div class="f_r_b_2 f_c">
                                <a class="f_s_a" href="/g53333333333355o.html"></a>
                                <a href="/g555o.html">reload answer next</a>
                            </div>
                            <div class="f_r_b_3 f_c">
                                <a href="/g5345o.html">reload answer next</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

Answer 1

左侧面板上的文字位于div的顶部，因为它的display属性为block。删除它，文本保持居中。

Fixed fiddle.

Answer 2

如果您尝试将文字居中以使其垂直居中，只需删除height: 100%;

即可

.flat_menu_wrap a{
    vertical-align: middle;
    color: #f00;
    font-size: 15px;
    font-weight: 600;
    display: block;
    //height: 100%;
}

奇怪的中心文本在div中定位

2 个答案: