文字を左寄せにして縦メニューの中央に寄せたい。

Question

##実現したいこと
ページ左部のメニューを文字を左寄せにしてメニューの中央に寄せたい。

###発生している問題・エラーメッセージ
↓の画像のようにしたいが、、、

↓ブラウザを縮小するとずれてしまう。

###該当のソースコード

<div id="side_col" class="col-md-2 side_col_<?php echo $side_col_align ?>">
	<!-- logo -->
	<?php header_logo(); ?>
	
	<a href="#" class="menu_button pc-none"><span>menu</span></a>
	<div id="global_menu" class="clearfix">
		<?php if (has_nav_menu('global-menu')) { ?>
			<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'theme_location' => 'global-menu' , 'container' => '' ) ); ?>
		<?php } ?>
	</div>

  #global_menu {
    font-size: 14px;
    margin-top: 60px;
    margin-bottom: 60px;
    margin-left: 75px;
    text-align: left;
    *zoom:1;
  }

###補足情報(言語/FW/ツール等のバージョンなど)
wordpressにて有償のテーマを使用し、WEBページの改修を行っています。

Bootstrap v3.3.6
WordPress 4.8.1
PHP 5.4.45

情報が少なく申し訳ありませんが、必要な情報などありましたらコメントをお願いします。

Answer 1

何となくレベルで申し訳ありませんが、

1．CSSのidを「global_menu」としているのに対して、
PHPでは「global-menu」といった名前定義の段階で
_（アンダーバー）と-（ハイフン）の混在が原因ではないか。

2．ブラウザを縮小した時に上手くいかないのは、
Bootstrap内のメディアクエリが効いているからではないか。

3。中央寄せしたい<div>に対して、Centerなどのパラメータが入っているか。

の以上、3点が気になりました。

Comments

[watanabecubik]

お忙しい中、ご回答ありがとうございます。
上記の3点確認致します。

Answer 2

bootstrapにしてはいかがでしょうか。