画像やボックスの配置で戸惑った時のメモ2019-5-6修正

横並びボックス　display:flex; 中央揃え

.box	{width:100%;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        justify-content: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;}

.box {width:100%;

display: flex;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

justify-content: center;

-webkit-justify-content: center;

-moz-justify-content: center;

-ms-justify-content: center;}

画像やボックスの中央揃え

画像をページやボックス、枠内の中央に配置するには、imgタグ内にcssを適用することで中央配置が出来る。

    <!-- html  -->
  <img class="gazo">

1 2	<!-- html --> <img class="gazo">

  /*   CSS 表記   */
  .gazo
    {display:block;
     margin-left:0;
     margin-right:0;}
     /* または */
  .gazo
    {display:block;
     margin:0 auto;}

/* CSS 表記 */

.gazo

{display:block;

margin-left:0;

margin-right:0;}

/* または */

.gazo

{display:block;

margin:0 auto;}

ボックス内画像の下の余白を取る

右の画像のように、ボックスにボーダーを付けて表示すると、画像の下に余白が出てしまうことが解る。

画像ファイルに以下のＣＳＳを付けることで画像がボックス化されて下部余白が無くなる。

img	{display: block;}　<!-- 又は　-->  vertical-align: bottom;

1	img {display: block;}　<!-- 又は　--> vertical-align: bottom;

ボックスからはみ出す画像

<div>
  <img src="url" style="float:right;">
  <p>文章が入っている。</p>
</div>

<div>

<p>文章が入っている。</p>

</div>

上記のように、ボックス内に画像と文章が存在し、画像を｢floar:right;｣として右寄せにした時、右の画像のように、文章の高さより画像の高さが大きい時、次に続くセクションの内容が上のボックスに入り込んでしまう現象（画像がボックスから、はみ出したように見える）が起きる。

この現象となる要因は、画像の右寄せ（float:right）が継続してからで、これを解消するには、以下の２つの方法のいずれかで解消出来る。

<!--  ボックスに以下のＣＳＳを当てる -->
<div style="overflow: auto;">
  
<!--  ボックスの記述の後に以下のhtmlを記述する　-->
<div style="clear: both;"></div>

ボックスの左右中央配置

左右の中央配置で良く利用される｢margin:0 auto;｣で殆ど出来る。ボックスの長さ（width=）を指定（pxや%など）していないと出来ないので注意。

  /*  一般的なボックスの左右中央配置   */ 
.box_a {margin:0 auto;}
  
  /* widthを入れたボックスの左右中央配置   */  
.box_a {width:500px;
        margin:0 auto;}

/* 一般的なボックスの左右中央配置 */

.box_a {margin:0 auto;}

/* widthを入れたボックスの左右中央配置 */

.box_a {width:500px;