SQLの窓

2020年05月17日


CSS/jQuery : 『display:table-cell』 と 『margin:auto』 と 『vertical-align:middle』 を使用して、吹き出し画像の中央に文章を表示する

display:table-cell は、IE は IE8 以降で使用できます。そもそも、ブロック要素を簡単に横並びにできるので便利ですが、内部の要素を『vertical-align: middle』で上下で中央に配置する事もでき、とてもこのような表示にうってつけです。

さらに、内部で浮島のように浮いた状態のブロック要素を 『margin:30px auto 0』と設定しなおして画像のデザインに合わせて微調整しています。

また、浮島内のテキストの振る舞いは、『text-align』で決定します。
吹き出し内の中央に文章を配置しています
吹き出し内
の中央に文章を配置
しています
<style>
.box {
	background: url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat;
	width: 323px;
	height: 278px;
	border: solid 1px #000;
	display: table-cell;
	vertical-align: middle;
}
.inbox {
	width: 200px;
	border: dashed 1px #B8561D;
	margin: auto;
	font-weight: bold;
	font-size: 18px;
}

.center {
	text-align: center;
	margin: 30px auto 0;
}
</style>
<div class="box">
	<div class="inbox">
	吹き出し内の中央に文章を配置しています
	</div>
</div>
<div class="box">
<pre class="inbox center">吹き出し内
の中央に文章を配置
しています</pre>
</div>

以下は、その様子を左側の BOX について、順番に jQuery で実装していったものです。( 順次実行していくと、Firefox の挙動が少し変です / 最終的には同じですが・・・ )



jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
.inbox_base {
	width: 200px;
	border: dashed 1px #B8561D;
	font-weight: bold;
	font-size: 18px;
}
</style>

<script type="text/javascript">

$(function(){

	// ボタン1
	$("#add_attr1")
		.attr("type", "button")
		.val("エリア定義")
		.click(function(){
			$(".div_add_attr1,.div_add_attr2")
				.css({
					"background" : "url(http://winofsql.jp/js/balloon/orange_balloon.png) center center no-repeat",
					"width": "323px",
					"height": "278px",
					"border": "solid 1px #000"
				});
		});

	// ボタン2
	$("#add_attr2")
		.attr("type", "button")
		.val("table-cellで横並び")
		.click(function(){
			$(".div_add_attr1,.div_add_attr2")
				.css({
					"display" : "table-cell"
				});
		});

	// ボタン3
	$("#add_attr3")
		.attr("type", "button")
		.val("内部DIV追加")
		.click(function(){
			$("<div id='inbox_001'></div>").appendTo( $(".div_add_attr1") )
				.text("吹き出し内の中央に文章を配置しています")
				.addClass("inbox_base");
		});

	// ボタン4
	$("#add_attr4")
		.attr("type", "button")
		.val("内部DIVに margin:auto で左右均等")
		.click(function(){
			$("#inbox_001")
				.css({
					"margin" : "auto"
				});
		});

	// ボタン5
	$("#add_attr5")
		.attr("type", "button")
		.val("外側DIVに vertical-align: middle で上下均等")
		.click(function(){
			$(".div_add_attr1")
				.css({
					"vertical-align" : "middle"
				});
		});

	// ボタン6
	$("#add_attr6")
		.attr("type", "button")
		.val("内部DIV内のテキストを中央揃え")
		.click(function(){
			$("#inbox_001")
				.css({
					"text-align" : "center"
				});
		});
});

</script>
<input id="add_attr1">
<input id="add_attr2">
<input id="add_attr3">
<br>
<input id="add_attr4">
<input id="add_attr5">
<br>
<input id="add_attr6">
<div class="div_add_attr1"></div>
<div class="div_add_attr2"></div>





タグ:jquery CSS
【CSS3の最新記事】
posted by lightbox at 2020-05-17 17:33 | CSS3 | このブログの読者になる | 更新情報をチェックする
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり