程序设计 centering

30

Наэтотвопросестьответына 堆栈溢出нарусском：СделатьблокDIVпоцентруродительскогоблока，асодержимоеблока格выровнятьпоправомукраю 如何使用CSS <div>在另一个文件中水平居中<div>？ <div id="outer"> <div id="inner">Foo foo</div> </div>

4283 html css alignment centering

30

如何将所有浏览器的div垂直居中？

我想将divCSS垂直居中放置。我不需要表或JavaScript，而只需要纯CSS。我找到了一些解决方案，但是所有这些解决方案都缺少Internet Explorer 6支持。 <body> <div>Div to be aligned vertically</div> </body> 如何div在所有主要浏览器（包括Internet Explorer 6）中垂直居中？

1366 css cross-browser alignment vertical-alignment centering

30

使用Twitter Bootstrap 3将列居中

如何在Twitter Bootstrap 3的容器（12列）中将一列大小的div居中？ .centered { background-color: red; } <body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div> </body> 运行代码段隐藏结果展开摘要我想要一个div类.centered，该类在容器内居中。如果有多个divs，我可能会使用一行，但是现在我只想要a div，其大小以一列为中心位于容器内（12列）。我也不确定上述方法是否足够好，因为其目的不是要抵消div一半。我不需要外部的自由空间，div并且内容的内容div按比例缩小。我想在div外部留出空间以使其均匀分布（缩小直到容器宽度等于一列）。

1146 css twitter-bootstrap twitter-bootstrap-3 centering

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; } <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="img/dummy1.JPG" alt="Dummy 1" …

676 html css css-position centering

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; } <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> 运行代码段隐藏结果展开摘要如何使用CSS在屏幕上将此框居中？

439 css css-position centering

14

如何在div中将按钮居中？

我有一个div，其宽度为100％。我想将按钮居中放置，该怎么办？ <div style="width:100%; height:100%; border: 1px solid"> <button type="button">hello</button> </div> 运行代码段隐藏结果展开摘要

220 html css centering

8

CSS水平居中固定div？

#menu { position: fixed; width: 800px; background: rgb(255, 255, 255); /* The Fallback */ background: rgba(255, 255, 255, 0.8); margin-top: 30px; } 我知道这个问题存在一百万次，但是我找不到解决方案。我有一个div，它应该固定在屏幕上，即使滚动页面，它也应该始终保持在屏幕中央！对于所有浏览器尺寸，div应该具有500px宽度，应该30px远离顶部（边缘顶部），应该在页面中间水平居中，并且在滚动其余页面时不应移动。那可能吗？

183 html css centering

7

在CSS网格中居中

我正在尝试使用CSS Grid创建一个简单的页面。我无法做的是将HTML文本集中到相应的网格单元格。我尝试将内容放置在和选择器div内部和外部的单独s中，left_bg并right_bg使用某些CSS属性无效。我该怎么做呢？ 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: …

179 html css centering css-grid

11

Bootstrap 4中心垂直和水平对齐

我有一个页面，其中仅存在表单，并且我希望将表单放置在屏幕的中央。 <div class="container"> <div class="row justify-content-center align-items-center"> <form> <div class="form-group"> <label for="formGroupExampleInput">Example label</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input"> </div> <div class="form-group"> <label for="formGroupExampleInput2">Another label</label> <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input"> </div> </form> </div> </div> 该justify-content-center对齐表格水平，但我无法弄清楚如何垂直对齐。我已经尝试使用align-items-center和align-self-center，但是它不起作用。我想念什么？演示

162 css twitter-bootstrap bootstrap-4 centering

7

边件宽度不同时，使中间件居中

想象一下以下布局，其中的点表示框之间的空间： [Left box]......[Center box]......[Right box] 当我删除右框时，我希望中心框仍位于中心，如下所示： [Left box]......[Center box]................. 如果我要删除左框，也是如此。 ................[Center box]................. 现在，当中心框中的内容变长时，它将在保持居中状态的同时占用所需的可用空间。左右框永远不会缩小，因此，当没有空间的地方overflow:hidden，text-overflow: ellipsis它将有效地破坏内容； [Left box][Center boxxxxxxxxxxxxx][Right box] 以上是我的理想情况，但我不知道如何实现此效果。因为当我创建如下的flex结构时： .parent { display : flex; // flex box justify-content : space-between; // horizontal alignment align-content : center; // vertical alignment } 如果左右框的大小完全相同，我将获得所需的效果。但是，如果两者之一的大小不同，则居中框不再真正居中。有没有人可以帮助我？更新资料一个justify-self会很好，这将是理想的： .leftBox { justify-self : flex-start; } …

161 html css flexbox centering

7

如何使标签在WinForms中居中？

在WinForms我正在使用Label来显示不同的消息，例如成功，失败等。我想在中心表格中将该标签居中。我想要一个解决方案，使标签中只有一个单词还是整个句子都可以居中。

137 c# .net winforms 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; } <div class="black"> <div class="message"> This is a popup message. </div> </div> 运行代码段隐藏结果展开摘要 JSFiddle

113 html css centering

8

自动页边距不在页面中居中

在此示例中，图像未居中。为什么？我的浏览器是Windows 7而非Google上的Google Chrome v10。 <img src="/img/logo.png" style="margin:0px auto;"/>

97 css google-chrome margin 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]}];

85 ios xcode label nsattributedstring centering

Questions tagged «centering»