在响应式菜单中居中对齐的文本

Question

您好我正在网站上工作，我有响应式菜单但是对齐左边我想让导航中的文字对齐并居中。我希望它像这样http://prntscr.com/6lhhhh

＆＃13;

＆＃13;

#suckerfishnav {background:#1F3E9F url("../multi-level-navigation-plugin/images/suckerfish_blue.png") repeat;font-size:12px;font-family:verdana,sans-serif;font-weight:bold;	width:100%;}#suckerfishnav, #suckerfishnav ul {float:left;list-style:none;line-height:37px;padding:0;border:1px solid #aaa;margin:0;	width:100%;}#suckerfishnav a {display:block;color:#dddddd;text-decoration:none;padding:0px 10px;}#suckerfishnav li {float:left;padding:0;}#suckerfishnav ul {position:absolute;left:-999em;height:auto;	width:151px;font-weight:normal;margin:0;line-height:1;	border:0;border-top:1px solid #666666;	}#suckerfishnav li li {	width:149px;border-bottom:1px solid #666666;border-left:1px solid #666666;border-right:1px solid #666666;font-weight:bold;font-family:verdana,sans-serif;}#suckerfishnav li li a {padding:4px 10px;	width:130px;font-size:12px;color:#dddddd;}#suckerfishnav li ul ul {margin:-21px 0 0 150px;}#suckerfishnav li li:hover {background:#1F3E9F;}#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a  {color:#dddddd;}#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {color:#dddddd;}#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {color:#dddddd;}#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul  {left:-999em;}#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul  {left:auto;background:#444444;}#suckerfishnav li:hover, #suckerfishnav li.sfhover {background:#5E7AD3;}

＆＃13;

<ul id="suckerfishnav" class="sf-menu">
<li><a href="">Tomato</a></li>
<li><a href="">Capsicum</a></li>
<li><a href="">Cucumber</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

以下是执行此操作的两种方法：

1）text-align：justify（FIDDLE）

.sf-menu {
  text-align: justify;
}
.sf-menu:after {
  content: '';
  display: inline-block;
  width: 100%;
}
li {
  display: inline-block;
}

<ul id="suckerfishnav" class="sf-menu">
  <li><a href="">Tomato</a>
  </li>
  <li><a href="">Capsicum</a>
  </li>
  <li><a href="">Cucumber</a>
  </li>
</ul>

2）display：flex with space-between（FIDDLE）

ul {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
}

<ul id="suckerfishnav" class="sf-menu">
  <li><a href="">Tomato</a>
  </li>
  <li><a href="">Capsicum</a>
  </li>
  <li><a href="">Cucumber</a>
  </li>
</ul>