jQueryを使用してボックスを上下左右中央に配置する（奮闘編：解決？）

■　サンプル（解決）：jQueryを使用してボックスを上下左右中央に配置する　■

desktop
jquery.center.jsを使用して画像を上下左右中央に配置します。
しかし、ボックスの中に入る画像を小さい画像に変えた場合など、（ボックスの幅は固定なので）右と下に隙間が出来、 ずれが生じます。（※jquery.center.jsは正しく動作しています。）

ずれているサンプルを見る

そこで、jQueryで画像の幅のサイズを取得して、ボックスの幅（div id="box"）を画像の幅と同じにしてあげるという処理を追加してみました。
<script type="text/javascript">
<!--
	jQuery.noConflict();
	var j$ = jQuery;
	j$(document).ready(function() {
	//以下の処理を追加
	var imgwidth = j$("#box img").attr("width");
	j$("#box").css({ width:(imgwidth) + "px"});
	//以下、jquery.center.jsによる処理
	j$("#box").center();
	});	
-->
</script>
これで、上下左右中央へ配置されます。

※注意　このサンプルは「text-align: center;」の存在をド忘れしていて、paddingで調整しようとしていた例です。
本当に私はアホでした。。。（完）
本編に戻る

タグ検索