我使用所有此代碼,因爲它正在更改現有網站的行爲和外觀,所以我無法觸及代碼結構(請參閱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é 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;
}
的東西,需要內部爲中心?但如何
我剛剛檢查了您的代碼,它對我來說是中心的... – 2014-12-04 01:24:28