display:table-cell は、IE は IE8 以降で使用できます。そもそも、ブロック要素を簡単に横並びにできるので便利ですが、内部の要素を『vertical-align: middle』で上下で中央に配置する事もでき、とてもこのような表示にうってつけです。 さらに、内部で浮島のように浮いた状態のブロック要素を 『margin:30px auto 0』と設定しなおして画像のデザインに合わせて微調整しています。 また、浮島内のテキストの振る舞いは、『text-align』で決定します。
吹き出し内の中央に文章を配置しています
吹き出し内 の中央に文章を配置 しています
<style>
.box {
background: url(https://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(https://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>
この画像に CSS を適用して、以下のようにごく自然に
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
