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>
|
|
【CSS3の最新記事】
- CSS の box-shadow を jQuery を使ってスライダーでどうなるか確認して定義文字列を取得できるようにしました
- CSS アニメーションによるハンバーガーアイコンの作成方法と CSS プロパティの意味
- CSS だけで回る、実行中アイコン ( 但し IE9 は不可 ) の指定されたCSSの意味の解説
- 『3D Bouncing Ball with CSS3』のデータを使って光沢ボタンを作成する
- フリーフォントを使った背景透過PNGとCSSを使って、グラデーションな影付き吹き出しやボタンを作る。
- Google ストリートビューを表示している class="gm-style"
- linear-gradient のみで、ほぼ大丈夫なようです(IEは10限定、Windows Safariはアウト)
- 現時点の IE9、IE10、Chrome、Firefox、Opera、Safari でグラデーションの CSS 記述
- CSS3 : box-shadow の影分身の解説
- CSS で画像が立ってるような影を付けて、画像の角は丸くしておく
- IE 兼用背景 Fade transition の実装
- CSS3 と HTML5 で実装具合の表示テスト - 2 / ( 透過・倍率編 )
- CSS3 と HTML5 で実装具合の表示テスト
- ブラウザ別の角丸とグラデーションの適用状態の比較画像
- CSS3 の borderRadius で、四角から円へのモーフィング
- CSS3 : 絶対位置指定(absolute)を使用して簡単にアニメーション。しかも、適用するのは、JavaScript
