html - CSS 似乎无法使表格单元格中的文本居中

Question

我使用所有这些代码是因为它正在改变现有网站的行为和外观，所以我无法触及代码结构(请参阅 HTML)。我只能触摸 CSS(也是为什么你看到这么多!重要的，要覆盖) 现在我遇到的问题是我似乎无法将 tabe-cells 内的文本与中心对齐，这正是我想要的。

HTML:

<div id="qvnbbtviewMenu">
<div id="qvnbbtviewActualMenu">
<a href="http://www.zikle.nl"><img src="images/icon/home.gif" width="16" height="16" /> Zikle</a>

<a href="http://Tekenwereld.zikle.nl" id="userLink"><img src="images/icon/user.gif" width="16" height="16" /> Autinique</a>

<a href="http://www.zikle.nl/?p=sendprivate&id=174002"><img src="images/icon/private_normal.gif" width="16" height="16" /> Verstuur priv&eacute; bericht</a>

<a href="/?p=report&id=174002"  id="qvnbbtreportLink"><img src="images/icon/report.gif" width="16" height="16" /> Meld misbruik</a>


    <a href="http://www.zikle.nl/editor.php?id=1444656"><img src="images/icon/page_edit.gif" width="16" height="16" /> Verander pagina</a>




</div>
</div>

到目前为止的 CSS:

<style>
/* CSS voor Zikle Header
door: http://www.tekenwereld.zikle.nl/
© 2014 - Tekenwereld
Alleen gebruiken met toestemming van de maker, geen enkel ander persoon */
@import url(http://fonts.googleapis.com/css?family=Lobster);

/* Global: Header */
    body div:first-child[id*="viewMenu"] {
        border-bottom: 2px solid #FFB3C6;
        height: 125px!important;
        background: url('http://cdn2.cgvector.com/wp-content/uploads/2013/01/Vector_Floral_00027.jpg') repeat!important;
        padding-bottom: 2em;
        text-align: center;

        z-index: 1
    }
    body div:first-child[id*="viewMenu"]::before {
             -webkit-transition: all 0.25s ease-out;  
             -moz-transition: all 0.25s linear;
              -ms-transition: all 0.25s linear; 
               -o-transition: all 0.25s linear;
                  transition: all 0.25s linear;
        display: block;
        content: "Nienn";
        font-size: 115px;
        color: #FF3366;
        text-shadow: 2px 2px #fff;
        font-family: 'Lobster', cursive;
        text-align: center;

        z-index: 2;
    }
    body div:first-child[id*="viewMenu"]:hover::before  {
        content: "Nienke";
        font-size: 115px;
    }

    body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] {
        position: relative!important;
        margin-top: 0px!important;
        width: 100vw!important; /*nieuwe CSS methode*/
        height: 36px;
        background: #f6b4d0;
        background-size: contain;
        border-bottom: 3px solid #FF668C;
        border-top: 1px solid #FF668C;
        -webkit-box-shadow: 0px -1px 8px 0px rgba(255, 126, 159, 0.68);
        -moz-box-shadow: 0px -1px 8px 0px rgba(255, 126, 159, 0.68);
        box-shadow: 0px -1px 8px 0px rgba(255, 126, 159, 0.68);
        left: 0!important;
        margin-left: 0!important;
        display: table-cell;
        vertical-align: middle;

        z-index: 3;
    }

/* Header: Links */
    body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a {
        color: #B8002E!important;
        text-shadow: 1px 1px #fff;
        text-transform: uppercase;
        font-size: 16px!important;
        padding-top: 6px;
        position: a
    }
    body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a[id*="reportLink"] {

    }
    body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a[id*="userLink"] {

    }
    body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a>img {
        width: 0!important;
        height: 0!important;
        background: url('http://www.zikle.nl/userfiles/images/0/2/5/4/02541550.png') no-repeat;
        padding: 8px!important;
    }
        /* Links: States */
            body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a:link { /* Nog niet geklikt */
                /* Ik raad je aan dit dezelfde styling te geven als de normale styling voor <a> tags, of dit gewoon leeg te laten */
            }            
            body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a:visited { /* Bezocht */

            }
            body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a:hover { /* Mouse hover */
                background: none!important;
                color: #FF668C!important;
            }
            body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] a:active { /* Geselecteerd (met bv tab) */

            }
</style>

这是表格单元格:

body div:first-child[id*="viewMenu"]>div[id*="ActualMenu"] {
    position: relative!important;
    margin-top: 0px!important;
    width: 100vw!important; /*nieuwe CSS methode*/
    height: 36px;
    background: #f6b4d0;
    background-size: contain;
    border-bottom: 3px solid #FF668C;
    border-top: 1px solid #FF668C;
    -webkit-box-shadow: 0px -1px 8px 0px rgba(255, 126, 159, 0.68);
    -moz-box-shadow: 0px -1px 8px 0px rgba(255, 126, 159, 0.68);
    box-shadow: 0px -1px 8px 0px rgba(255, 126, 159, 0.68);
    left: 0!important;
    margin-left: 0!important;
    display: table-cell;
    vertical-align: middle;

    z-index: 3;
}

里面的东西需要居中？但是如何

Answer 1

我相信 parent 必须是

display:table;

设置了宽度和高度。 查看这篇很棒的文章: http://css-tricks.com/centering-in-the-unknown/