我使用所有这些代码,因为它正在改变现有网站的行为和外观,因此我无法触及代码结构(请参阅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é 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 :(得分:0)
答案 1 :(得分:0)
在CSS for:
中/* 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
}
你有&#34; position: a
&#34;这不是真正的CSS代码。
您可以将其替换为text-align:center;
,它应该有效。