タグ付けされた質問 「centering」

センタリングとは、スペースの中間点に何かを配置することです。

30
<div>を水平方向に中央揃えする方法
OverаэтотвопросестьответынаStack Overflowнарусском：Сделатьблокdivпоцентруродительскореорорллллоооооооооом CSSを使用&lt;div&gt;して別の内部でを水平方向に中央揃えするにはどうすればよい&lt;div&gt;ですか &lt;div id="outer"&gt; &lt;div id="inner"&gt;Foo foo&lt;/div&gt; &lt;/div&gt;
4287 html  css  alignment  centering 
30
すべてのブラウザーでdivを垂直方向に中央揃えにする方法は？
divCSSを使用して垂直方向に中央揃えにします。テーブルやJavaScriptは必要ありませんが、純粋なCSSだけが必要です。いくつかの解決策を見つけましたが、それらのすべてにInternet Explorer 6のサポートがありません。 &lt;body&gt; &lt;div&gt;Div to be aligned vertically&lt;/div&gt; &lt;/body&gt; divInternet Explorer 6を含むすべての主要なブラウザーで垂直方向に中央揃えするにはどうすればよいですか？
30
Twitter Bootstrap 3を使用して列を中央に配置する
Twitter Bootstrap 3でコンテナー（12列）内の1列サイズのdivを中央揃えするにはどうすればよいですか？ .centered { background-color: red; } &lt;body class="container"&gt; &lt;div class="col-lg-1 col-offset-6 centered"&gt; &lt;img data-src="holder.js/100x100" alt="" /&gt; &lt;/div&gt; &lt;/body&gt; コードスニペットを実行する結果を非表示スニペットを展開 divクラス.centeredがコンテナ内の中央に配置されるようにしたい。複数divのがある場合は行を使用できますが、今のところdiv、コンテナー内で中央に配置される1列のサイズ（12列）が必要です。 またdiv、半分を相殺しないことを意図しているため、上記のアプローチで十分かどうかもわかりません。外の空きスペースdivとdiv縮小の内容は比例して必要ありません。divの外側のスペースを空にして均等に分散させたいです（コンテナーの幅が1列になるまで縮小します）。
25
「位置：絶対」要素を中央に配置する方法
属性がにposition設定されている要素を中央に配置するときに問題が発生しabsoluteます。画像が中央に配置されない理由を誰かが知っていますか？ body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } &lt;body&gt; &lt;div id="slideshowWrapper"&gt; &lt;ul id="slideshow"&gt; &lt;li&gt;&lt;img src="img/dummy1.JPG" alt="Dummy 1" …
16
位置を中央揃え：固定要素
position: fixed;画面の中央に動的な幅と高さのポップアップボックスを作成します。私margin: 5% auto;はこれに使用しました。なければposition: fixed;、それはではなく、垂直、水平に罰金を中央に配置します。を追加した後position: fixed;も、水平方向の中央に配置されません。 これが完全なセットです： .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } &lt;div class="jqbox_innerhtml"&gt; This should be inside a horizontally and vertically centered box. &lt;/div&gt; コードスニペットを実行するHide resultsスニペットを展開 CSSでこのボックスを画面の中央に配置するにはどうすればよいですか？
14
div内のボタンを中央に配置する方法は？
幅が100％のdivがあります。 ボタンを中央に配置したいのですが、どうすればよいですか？ &lt;div style="width:100%; height:100%; border: 1px solid"&gt; &lt;button type="button"&gt;hello&lt;/button&gt; &lt;/div&gt; コードスニペットを実行するHide resultsスニペットを展開
220 html  css  centering 
8
固定divのCSS水平方向の中央揃え？
#menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } 私はこの質問が100万回あることを知っていますが、私の問題の解決策を見つけることができません。私はdivを持っています、それは画面で修正されるべきです、ページがスクロールされたとしても、それは常に画面の中央に中央に留まるべきです！ divには500px幅があり、30px上（マージン-トップ）から離れている必要があり、すべてのブラウザーサイズでページの中央の水平方向の中央に配置され、残りのページをスクロールするときに移動しないようにする必要があります。 それは可能ですか？
183 html  css  centering 
7
CSSグリッドの中央揃え
CSSグリッドでシンプルなページを作成しようとしています。 私が失敗しているのは、HTMLのテキストをそれぞれのグリッドセルの中央に配置することです。 およびセレクターのdiv内側と外側の両方に別々のにコンテンツを配置して、CSSプロパティのいくつかを試してみましたが、役に立ちませんでした。left_bgright_bg どうすればよいですか？ html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid; background-color: #3498db; grid-column: 1 / 1; grid-row: 1 / 1; z-index: 0; } .right_bg { display: subgrid; background-color: #ecf0f1; grid-column: 2 …
179 html  css  centering  css-grid 
11
Bootstrap 4中央の垂直および水平方向の配置
フォームのみが存在するページがあり、フォームを画面の中央に配置したい。 &lt;div class="container"&gt; &lt;div class="row justify-content-center align-items-center"&gt; &lt;form&gt; &lt;div class="form-group"&gt; &lt;label for="formGroupExampleInput"&gt;Example label&lt;/label&gt; &lt;input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"&gt; &lt;/div&gt; &lt;div class="form-group"&gt; &lt;label for="formGroupExampleInput2"&gt;Another label&lt;/label&gt; &lt;input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"&gt; &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; &lt;/div&gt; justify-content-center水平方向のフォームを揃えたが、私は垂直に整列する方法を見つけ出すことはできません。私が使用しようとしましたalign-items-centerとalign-self-center、それは動作しません。 何が欠けていますか？ デモ
7
サイドアイテムの幅が異なる場合、中央のアイテムを中央に配置します
次のレイアウトを想像してください。ドットはボックス間のスペースを表しています。 [Left box]......[Center box]......[Right box] 右のボックスを削除しても、次のように、中央のボックスがまだ中央にあるのが好きです。 [Left box]......[Center box]................. 左のボックスを削除する場合も同様です。 ................[Center box]................. これで、中央のボックス内のコンテンツが長くなると、中央に配置されたままの状態で、必要なだけのスペースが必要になります。スペースが残っていないところ際に、左と右のボックスは、このように縮小し、決してだろうoverflow:hiddenとtext-overflow: ellipsisコンテンツを破るために有効になるだろう。 [Left box][Center boxxxxxxxxxxxxx][Right box] 上記のすべてが私の理想的な状況ですが、私はこの効果を達成する方法がわかりません。なぜなら私がそのようなフレックス構造を作成するとき： .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } 左と右のボックスがまったく同じサイズであれば、希望する効果が得られます。ただし、2つのうちの1つが異なるサイズのものである場合、中央に配置されたボックスは真に中央に配置されなくなります。 私を助けることができる人はいますか？ 更新 A justify-selfはいいでしょう、これは理想的です： .leftBox { justify-self : flex-start; …
161 html  css  flexbox  centering 
5
ページが上下にスクロールされている場合でも、画面の中央に「div」を中央配置しますか？
私のページには、クリックするとdiv画面の中央に（ポップアップスタイル）を表示するボタンがあります。 次のCSSを使用してdiv、画面の中央にを配置しています。 .PopupPanel { border: solid 1px black; position: absolute; left: 50%; top: 50%; background-color: white; z-index: 100; height: 400px; margin-top: -200px; width: 600px; margin-left: -300px; } このCSSは、ページが下にスクロールされない限り正常に機能します。 しかし、ページの下部にボタンを配置すると、ボタンをクリックdivすると上部に表示され、ユーザーは上にスクロールしてのコンテンツを表示する必要がありdivます。 divページがスクロールされている場合でも、画面中央にを表示する方法を教えてください。
126 html  css  scroll  position  centering 
12
margin：autoを使用してdivを垂直方向に揃える
したがって、を使用すると、divを水平方向に中央揃えできることがわかりますmargin:0 auto;。必要がありmargin:auto auto;、私はそれが動作するはずだと思うどのように動作しますか？垂直方向にも中央揃えですか？ なぜうまくいかないのvertical-align:middle;ですか？ .black { position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); } .message { background:yellow; width:200px; margin:auto auto; padding:10px; } &lt;div class="black"&gt; &lt;div class="message"&gt; This is a popup message. &lt;/div&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開 JSFiddle
113 html  css  centering 
10
帰属テキストセンターの配置
私はすべてを試しましたが、このテキストを中央に配置できないようです。誰かがエラーの場所を教えてもらえますか？ NSMutableParagraphStyle *paragraphStyle = NSMutableParagraphStyle.new; paragraphStyle.alignment = NSTextAlignmentCenter; label.attributedText = [[NSAttributedString alloc] initWithString:cell.EventTitle.text attributes:@{NSForegroundColorAttributeName : [UIColor whiteColor],NSParagraphStyleAttributeName:paragraphStyle,NSBaselineOffsetAttributeName : @0,NSFontAttributeName : [UIFont fontWithName:@"BrandonGrotesque-Black" size:34]}];
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.