displayプロパティの表示形式と要素の中央配置 – browser-land

displayプロパティの表示形式と要素の中央配置

 インライン要素

インライン要素とは、pタグの中のstrongタグのように、ブロック要素の一部を強調するような使われ方をする要素です。
ブロック要素に「display:inline;」と指定するとインライン要素になります。

<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
* 前後には改行が入らない
* 幅 (width) と高さ (height) を指定できず、文字の太さや文章の長さで決まる
* 余白 (padding,margin) を左右に指定できる

 ブロック要素

ブロック要素とは、見出し・段落・表など、文書を構成する基本となる要素です。
インライン要素に「display:block;」と指定するとブロック要素になります。

<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
* 前後には改行が入る
* 幅 (width) と高さ (height) を指定できる
* 余白 (padding,margin) を上下左右に指定できる

 フレックスボックス

フレックスボックスとは定義した要素の、その直下の要素が並列になるスタイルです。
要素に「display:flex;」と指定するとフレックスボックスになります。

* 前後には改行が入らない
* 幅 (width) と高さ (height) を指定できる
* 余白 (padding,margin) を上下左右に指定できる

CASE. 共通のHTML

<ul>
 <li>List 1</li>
 <li>List 2</li>
 <li>List 3</li>
</ul> 

CASE. <li> を並列にする

ul {
 display: -webkit-flex;
 display: flex;
}

CASE. <li> を並列に、<ul> を中央に配置する

ul {
 display: -webkit-flex;
 display: flex;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-align-items: center;
 align-items: center;
}

* justify-content:center;水平方向の揃え
* align-items:center;垂直方向の揃え

CASE. <li> を並列にする

ul {
 display: -webkit-flex;
 display: flex;
}

 flexboxを使ったdiv要素の中央配置

・HTML

<div class=’cssCenter’>
 <div></div>
</div>

・CSS

.cssCenter {
 width:100%;
 height:100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード