クラス名symbolのついている、SNSボタン三つをインライン要素にして並べたのですが、text-align: center;をつけても左揃えになります。

Question

クラス名symbolのついている、SNSボタン三つをインライン要素にして並べたのですが、text-align: center;をつけても左揃えになります。

インライン要素はtext-align: center;で中央ぞろえになるはずですが複数だとならないのでしょうか？
divかspanで三つを囲むしかないでしょうか？

<!-- drawermenu -->
			<nav>
				<div id="nav__drawermenu-wrap">
				<ul>
					<li>
						<a class='symbol animation-hover action-hover' href="https://plus.google.com/share?url=" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe039;'></a>
						
	                           	<a class='symbol animation-hover action-hover' href="http://www.facebook.com/share.php?u=" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" title='&#xe027;'></a>
	            		
	                           	<a class='symbol animation-hover action-hover' href="http:/></a>
	                
					</li>
					<li><a class="link-block" href="#room">教室</a></li>
					<li><a  class="link-block" href="#accsess">アクセス</a></li>
					<li><a  class="link-block" href="#contactUs">お問い合わせ</a></li>
				</ul>
		      	</div>
	      	</nav>
	      	<!-- /drawermenu -->

/* 左から出てくるdrawer-menu */
#nav__drawermenu-wrap ul {
    z-index: 300;
    width: 100%;
    position: fixed;
    top: 0;
    padding-top: 2.8rem;
/*    background-color: rgba(255,100,50,.2);*/
    cursor: pointer;
    margin-left: -100%;
    transition-propety:all;
    transition-duration:1s;
}

#nav__drawermenu-wrap li {
  margin-bottom: 0.2rem;
  background: rgba( 229, 228, 255, 0.3 ); 
  /*background: -o-linear-gradient(left, rgba(52, 152, 219,0.5) #066, rgb(41, 128, 185,0.5) #066);
  background: linear-gradient(to right, rgba(52, 152, 219,0.5) #066, rgb(41, 128, 185,0.5) #066);*/
}

#nav__drawermenu-wrap li a {
    height: 6rem;
    line-height: 6rem;
    margin: 0 auto;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0,0,0,.9);
}

.link-block {
    display: block;
    text-align: center;
}

Answer 1

インラインようそに text-align じゃなくて、ul に text-align です。

ul に text-align:center で、インライン要素がセンタリングする、ですね。
li はインラインじゃないので、display: inline-block します。

Comments

[退会済みユーザー]

すいません。親要素につけるんでしたね。
ただliにつけるという形ではいけないのでしょうか？

＞
li はインラインじゃないので、display: inline-block します。

li はインラインでもブロックでもない特殊な要素なのですか？

[ipadcaron]

何も付けないと縦に並ぶのでブロック要素なんじゃないですか。

li に付けるじゃダメなのか？

どこをセンタリングしたいのか、ですね。ul の css width が 100%なので、 li をセンタリングしたいのだと解釈したんですがハズレでしたか。

[退会済みユーザー]

おかげさまで、親要素につけることで、解決しました。

liはブロック要素なのですね。