Wordpress CSS中的文本對齊子項目

我正在練習Wordpress和CSS，但它不適合我。我試圖把鏈接/文本完全放在中心，但不知何故它不適用於我。如果我添加填充或邊距，他會在那裏添加一些奇怪的空間。Wordpress CSS中的文本對齊子項目

我想有測試1，測試2等該菜單的中心。請看下面的代碼，我目前有：

/* Navigatie */ 
.main-navigation { 
    clear: both; 
    position: fixed; 
    top: 0px; 
    background-image: url(http://localhost/blog/images/nav.jpg); 
    display: block; 
    float: left; 
    text-transform: uppercase; 
    height: 55px; 
    width: 100%; 
} 

.main-navigation a { 
    display: block; 
    text-decoration: none; 
    padding-top: 15px; 
    padding-right: 50px; 
    color: white; 
} 

/* Muis hover linkjes */ 
.main-navigation a:hover { 
    text-decoration: underline; 
} 

/* Kleur na visited */ 
.main-navigation a:visited { 
    color: white; 
} 

.main-navigation ul { 
    text-align: center; 
} 



.main-navigation li { 
    display: inline-block; 
    float: none; 
} 


.main-navigation ul ul a { 
    background-color: blue; 
    height: 50px; 
    text-align: center; 

}

HTML

<!DOCTYPE html> 
<html lang="nl"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="profile" href="http://gmpg.org/xfn/11"> 

<title>TESTEAMS &#8211; En nog een WordPress site</title> 
<meta name='robots' content='noindex,follow' /> 
<link rel='dns-prefetch' href='//s.w.org' /> 
<link rel="alternate" type="application/rss+xml" title="TESTEAMS &raquo; Feed" href="http://localhost/blog/index.php/feed/" /> 
<link rel="alternate" type="application/rss+xml" title="TESTEAMS &raquo; Reactiesfeed" href="http://localhost/blog/index.php/comments/feed/" /> 
     <script type="text/javascript"> 
      window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.2.1\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.7.2"}}; 
      !function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),!(j.toDataURL().length<3e3)&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,65039,8205,55356,57096),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57331,55356,57096),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55357,56425,55356,57341,8205,55357,56507),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55357,56425,55356,57341,55357,56507),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); 
     </script> 
     <style type="text/css"> 
img.wp-smiley, 
img.emoji { 
    display: inline !important; 
    border: none !important; 
    box-shadow: none !important; 
    height: 1em !important; 
    width: 1em !important; 
    margin: 0 .07em !important; 
    vertical-align: -0.1em !important; 
    background: none !important; 
    padding: 0 !important; 
} 
</style> 
<link rel='stylesheet' id='mindset-style-css' href='http://localhost/blog/wp-content/themes/mindset-child/style.css?ver=4.7.2' type='text/css' media='all' /> 
<link rel='https://api.w.org/' href='http://localhost/blog/index.php/wp-json/' /> 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/blog/xmlrpc.php?rsd" /> 
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/blog/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.7.2" /> 
<link rel="canonical" href="http://localhost/blog/" /> 
<link rel='shortlink' href='http://localhost/blog/' /> 
<link rel="alternate" type="application/json+oembed" href="http://localhost/blog/index.php/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fblog%2F" /> 
<link rel="alternate" type="text/xml+oembed" href="http://localhost/blog/index.php/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fblog%2F&#038;format=xml" /> 
    <style type="text/css"> 
      .site-title, 
     .site-description { 
      position: absolute; 
      clip: rect(1px, 1px, 1px, 1px); 
     } 
     </style> 
    </head> 

<body class="home page-template-default page page-id-78"> 
<div id="page" class="site"> 
    <a class="skip-link screen-reader-text" href="#content">Skip to content</a> 

    <header id="masthead" class="site-header" role="banner"> 
     <div class="site-branding"> 
          <p class="site-title"><a href="http://localhost/blog/" rel="home">TESTEAMS</a></p> 
          <p class="site-description">En nog een WordPress site</p> 
        </div><!-- .site-branding --> 

     <nav id="site-navigation" class="main-navigation" role="navigation"> 
      <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button> 
      <div class="menu-hoofdnavigatie-container"><ul id="primary-menu" class="menu"><li id="menu-item-47" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href="http://localhost/blog/index.php/home/">Home</a></li> 
<li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://localhost/blog/index.php/berichten/">Blog</a></li> 
<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-71"><a href="http://localhost/blog/index.php/mlm-bedrijven/">MLM Bedrijven</a> 
<ul class="sub-menu"> 
    <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65"><a href="http://localhost/blog/index.php/mlm-bedrijven/x/">X</a></li> 
    <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-68"><a href="http://localhost/blog/index.php/mlm-bedrijven/v/">V</a></li> 
</ul> 
</li> 
<li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://localhost/blog/index.php/factsheets/">Factsheets</a></li> 
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://localhost/blog/index.php/wie-zijn-wij/">Wie zijn wij</a></li> 
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-55"><a href="http://localhost/blog/index.php/contact/">Contact</a> 
<ul class="sub-menu"> 
    <li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a href="http://localhost/blog/index.php/contact/test-1/">Test 1</a></li> 
    <li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a href="http://localhost/blog/index.php/contact/test-2/">Test 2</a></li> 
    <li id="menu-item-93" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93"><a href="http://localhost/blog/index.php/contact/test-3/">Test 3</a></li> 
</ul> 
</li> 
</ul></div>  </nav><!-- #site-navigation --> 
    </header><!-- #masthead --> 

    <div id="content" class="site-content"> 

    <div id="primary" class="content-area"> 
     <main id="main" class="site-main" role="main"> 


<article id="post-78" class="post-78 page type-page status-publish hentry"> 
    <header class="entry-header"> 
     <h1 class="entry-title">Dit is dé plek voor entrepreneurs</h1> </header><!-- .entry-header --> 

    <div class="entry-content"> 
     <p>Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website. Dit is de voorpagina van de website.</p> 
    </div><!-- .entry-content --> 

    </article><!-- #post-## --> 

     </main><!-- #main --> 
    </div><!-- #primary --> 


    </div><!-- #content --> 

    <footer id="colophon" class="site-footer" role="contentinfo"> 
     <div class="site-info"> 
      &copy Domein.nl | Onderdeel van QEAMS 
     </div><!-- .site-info --> 
    </footer><!-- #colophon --> 
</div><!-- #page --> 

<script type='text/javascript' src='http://localhost/blog/wp-content/themes/mindset/js/navigation.js?ver=20151215'></script> 
<script type='text/javascript' src='http://localhost/blog/wp-content/themes/mindset/js/skip-link-focus-fix.js?ver=20151215'></script> 
<script type='text/javascript' src='http://localhost/blog/wp-includes/js/wp-embed.min.js?ver=4.7.2'></script> 

</body> 
</html>

來源

2017-03-16 user115195

請分享你的html –

正如我所提到的，它是Wordpre SS。 – user115195

您仍然可以共享生成的HTML – APAD1

歐凱明白我創建了一個簡單基本的例子來了解你在這裏

/* Navigatie */ 
 

 
.main-navigation { 
 
    background: blue; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.main-navigation a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px 0; 
 
} 
 

 

 
/* Muis hover linkjes */ 
 

 
.main-navigation a:hover { 
 
    text-decoration: underline; 
 
    background: red; 
 
} 
 

 

 
/* Kleur na visited */ 
 

 
.main-navigation a:visited { 
 
    color: white; 
 
}

<ul class="main-navigation"> 
 
    <li><a href="#">Test 1</a></li> 
 
    <li><a href="#">Test 2</a></li> 
 
    <li><a href="#">Test 2</a></li> 
 
</ul>

來源

2017-03-16 21:07:52

這對我有用，謝謝！ – user115195

Wordpress CSS中的文本對齊子項目

回答

相關問題