Meteor Slidesのボタンをセンタリングする

投稿日：2013年5月20日

WordPressプラグイン「Meteor Slides」を導入してスライドショーにしてみたわけですが、オプションで表示されるナビゲーションボタンがデフォルトだと左寄せになっていたので、これをセンタリング。

まずはプラグイン編集からmeteor-slides.cssを編集します。

デフォルトでは以下のようになっていますが

.meteor-slides .meteor-buttons {
    bottom: -15px;
    height: 9px;
    left: 0;
    margin: 0;
    padding: 6px 0 0;
    position: absolute;
    width: 100%;
    z-index: 999;
}
header#branding .meteor-buttons {
	left: 5px; /* A little nudge for Twenty Eleven */
}
.meteor-buttons a {
	background: url('../images/buttons.png') no-repeat bottom left;
	display: block;
	float: left;
	width: 9px;
	height: 9px;
	margin: 0 3px 0 0 !important;
	outline: none;
	text-indent: -9999px;
}

これを以下のように書き換えます。

.meteor-slides .meteor-buttons {
    bottom: -15px;
    height: 9px;
    margin: 0;
    padding: 6px 0 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    text-align:center;
}
.meteor-buttons a {
    background: url('../images/buttons.png') no-repeat bottom left;
    display: inline-block;
    width: 9px;
    height: 9px;
    margin: 0 2px;
    outline: none;
    text-indent: -9999px;
}

参考サイト