DIVリストを中央に配置し画面幅に合わせる CSS_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

DIVリストを中央に配置し画面幅に合わせる CSS_html/css_WEB-ITnose

Jun 24, 2016 am 11:32 AM

DIV 領域の幅と高さが 100px であると仮定します。数十個あります

画面の幅に合わせて各行の番号を表示し、
各行の DIV リストを中央揃えにして表示したいとします整列し、
左右の距離が等しくなる

CSSコードを求める

ディスカッションへの返信(解決策)

そして、各行のDIVリストを中央揃えにし、

これは難しいです思いつきます方法は js を使うことです

&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;UTF-8&quot;&gt;&lt;title&gt;Swapping Songs&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;.main {margin:0 auto}.main .nav {width:100px; border:1px solid #ddd;height: 40px; display: inline-table; margin-bottom:4px;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;main&quot;&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;	&lt;div class=&quot;nav&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;

ログイン後にコピー

.main {margin:0 auto; text-align:center;}

.nav {width:100px; 1px ソリッド #dd d; 表示:インラインブロック:4px;

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。