スマホで中央表示したい

Question

前提・実現したいこと

パソコン表示では右寄せ、スマホ表示では中央にもっていきたいです。
どうしたらいいでしょうか。よろしくお願いします。

<header>
<div id="topIn01">
   		<ul class="pctop">
			<li class="information"><a href="#">お知らせ</a></li>
			<li class="access"><a href="#">アクセス</a></li>
            <li class="faq"><a href="#">よくあるご質問</a></li>
			<li class="contact"><a href="#">お問い合わせ</a></li>
			
		</ul>
	</div>
</header>

#topIn01 ul{
		text-align: right;
	}
	#topIn01 ul li{
		display: inline-block;
		color: #4faf87;
		text-align: right;
		padding-left: 0px;
		margin-left: 10px;
	}
	#topIn01 ul li a{
		display: inline-block;
		color: #4faf87;
		font-weight: bold;
		font-size: 13px;
        text-decoration: none;
	}
	#topIn01 ul .information{
		background: url(ico_information.png) no-repeat left 5px;
		width: 75px;
	}
	#topIn01 ul .access{
		background: url(ico_access_pc.png) no-repeat left center;
		width: 71px;
	}
	#topIn01 ul .siteMap{
		background: url(ico_sitemap.png) no-repeat left 6px;
		width: 100px;
	}
    #topIn01 ul .faq{
		background: url(ico_faq_pc.png) no-repeat left 6px;
		width: 115px;
	}
	#topIn01 ul .contact{
		background: url(ico_contact_pc.png) no-repeat left 6px;
		width: 103px;
	}
	#topIn01{
		position: relative!important;
	}

試したこと

メディアクエリなどいろいろやってみたのですが、スマホ表示が中央になりませんでした。

Answer 1

下記を最後に追加してください。600px以下で中央寄せになります。

@media screen and (max-width: 600px) {
  #topIn01 ul{
    text-align: center;
  }  
}

Comments

[reiNaka]

ちょっとした記述の間違いでした。
気づかせていただきありがとうございました！