ホームページ > 記事 > ウェブフロントエンド > 【CSS3】-スタイルのヒント_html/css_WEB-ITnose
【CSS3】-スタイルのヒント_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:43:23981ブラウズ
水平方向の中央の設定 - 固定幅のブロック要素
設定された要素がブロック要素の場合、text-align: center の使用は機能しません。 この場合、次の 2 つの状況があります: 固定幅 ブロック形状。要素と 無限幅ブロック要素。このセクションでは、まず固定幅のブロック要素について説明します。
固定幅とブロックの2つの条件を満たす要素は、「左右の余白」の値を「自動」に設定することで中央揃えにすることができます。 div ブロック要素を水平方向に中央揃えに設定する例を見てみましょう:
html コード:
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div></body>
css コード:
<style>div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */}</style>
は次のように書くこともできます:
margin-left:auto;margin-right:auto;
注意:要素「上下マージン」を任意に設定できます。
水平方向のセンタリングのまとめ - 幅可変のブロック要素の方法(1)
実際の作業では、Webページのページングナビゲーションなど、「幅が可変のブロック要素」に対してセンタリングを設定する必要が出てきます。ページングの量は定義されていないため、幅を設定して弾力性を制限することはできません。
可変幅のブロック要素を中央に配置するには 3 つの方法があります (現在、これら 3 つの方法がより頻繁に使用されます):
- テーブルタグを追加する
- 表示を設定する;インラインメソッド
- 位置:相対と左:50% を設定する;
このセクションでは、最初の方法について説明します:
ステップ 1: 設定する必要がある中央の要素の外側に table タグ (92cee25da80fac49f6fb6eec5fd2c22a、a34de1251f0d9fe1e645927f19a896e8、b6c5a531a458a2e790c1fd6421739d1c を含む) を追加します。 。
ステップ 2: このテーブルの「左右のマージンを中央に設定」します (これは固定幅ブロック要素と同じ方法です)。 Examplesは次のとおりです：
htmlコード：<div><table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody></table></div>cssコード：rreee inline タイプの場合は、text-align:center を使用して中央揃え効果を実現します。次の例:
html コード:
<style>table{ margin:0 auto;}ul{list-style:none;margin:0;padding:0;}li{float:left;display:inline;margin-right:8px;}</style> css コード:
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>
最初の方法と比較したこの方法の利点は、非セマンティックなタグを追加する必要がなく、タグのネストの深さが簡素化されることです。ただし、いくつかの問題もあります。ブロック要素の表示タイプがインラインに変更され、インライン要素に変換されるため、長さの値の設定などの一部の機能が失われます。
水平センタリングのまとめ - 幅可変ブロック要素のやり方(3)
親要素にfloatを設定し、親要素にposition:relativeとleft:50%を設定し、position:relativeとleftを設定することで、 - 子要素の 50% が水平方向の中央揃えを実現します。
コードは次のとおりです:
<style>.container{ text-align:center;}.container ul{ list-style:none; margin:0; padding:0; display:inline;}.container li{ margin-right:8px; display:inline;}</style> css コード:
<body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>
このメソッドの利点は、ブロック要素を保持しつつ、display:block の形式で表示できることです。が追加され、ネストの深さは増加しませんが、その欠点は、position:relative が設定されているため、特定の副作用が生じることです。
垂直方向のセンタリング - 親要素の高さが決定された単一行のテキスト
親要素の高さが決定された単一行のテキスト
垂直方向のセンタリング方法は、高さと行を設定することで実現されます。親要素の高さを一定にする必要があります。次のコード:
<style>.container{ float:left; position:relative; left:50%}.container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%;}.container li{float:left;display:inline;margin-right:8px;}</style> css コード:
<div class="container"> hi,imooc!</div>
垂直方向中央揃え - 親要素高さを決定する 複数行テキスト (方法 1)
高さ親要素 複数行のテキスト、画像、およびブロック要素の垂直方向の中央揃えを決定するには 2 つの方法があります: 方法 1: insert table (tbody、tr、td を含む) タグを使用し、vertical-align: middle を設定します。 垂直方向のセンタリングといえば、CSSに垂直方向のセンタリング用のプロパティvertical-alignがありますが、このスタイルは親要素がtdまたはthの場合にのみ有効になります。したがって、再度 table タグを挿入する必要があります。以下の例を見てください: html コード: <style>.container{ height:100px; line-height:100px; background:#999;}</style>
css コード:
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p></div></td></tr></tbody></table></body>
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。
html代码：
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div></div>
css代码：
<style>.container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/}</style>
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7。
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
- position : absolute
- float : left 或 float:right
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a></div>
css代码
<style>.container a{ position:absolute; width:200px; background:#ccc;}</style>