2014-12-03 102 views
1

我使用所有此代碼,因爲它正在更改現有網站的行爲和外觀,所以我無法觸及代碼結構(請參閱HTML)。我所能碰到的只有CSS(也就是爲什麼你看到這麼多!重要,覆蓋) 現在我遇到的問題是我似乎無法將tabe-cell內的文本對齊到中心,這真的是我想要的。CSS似乎無法在表格單元中居中文本

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; 
} 

的東西,需要內部爲中心?但如何

回答

0

在CSS爲:

/* 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 
    } 

你有 「position: a」 這是不實際的CSS代碼。

你可以用text-align:center;替換它,它應該可以工作。

+0

不起作用... – Jofairden 2014-12-03 22:02:35