标签: centering

如何水平居中<div>?

如何使用CSS <div>在另一个内部水平居中<div>

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Run Code Online (Sandbox Code Playgroud)

html css alignment centering

4116
推荐指数
55
解决办法
386万
查看次数

如何为所有浏览器垂直居中div?

我想div用CSS垂直居中.我不想要表或JavaScript,只需要纯CSS.我找到了一些解决方案,但所有这些解决方案都缺少Internet Explorer 6支持.

<body>
    <div>Div to be aligned vertically</div>
</body>
Run Code Online (Sandbox Code Playgroud)

如何div在所有主流浏览器(包括Internet Explorer 6)中垂直居中?

css cross-browser alignment vertical-alignment centering

1310
推荐指数
23
解决办法
141万
查看次数

使用Twitter Bootstrap 3将列居中

如何在Twitter Bootstrap 3中将容器中的一个列大小的div(12列)居中.

请看起初小提琴.

.centered {
  background-color: red;
}
Run Code Online (Sandbox Code Playgroud)

所以,我想要一个div.centered,在容器中居中.如果有多个div,我可以使用一行,但是现在我只想要一个在容器中居中的一列大小的div(12列).

我也不确定上述方法是否足够好,因为意图不是要抵消div一半.我不需要外面的自由空间divdiv收缩比例的内容.我想将div外部空间均匀分布(缩小到容器宽度==一列).

css centering twitter-bootstrap twitter-bootstrap-3

1109
推荐指数
18
解决办法
208万
查看次数

如何将"position:absolute"元素居中

我有一个问题集中在属性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;
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

html css css-position centering

623
推荐指数
19
解决办法
74万
查看次数

在页面上垂直和水平居中<div>的最佳方法是什么?

<div>在页面上垂直和水平居中元素的最佳方法是什么?

我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么?

html css alignment vertical-alignment centering

509
推荐指数
20
解决办法
86万
查看次数

中心位置:固定元素

我想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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
Run Code Online (Sandbox Code Playgroud)

如何使用CSS将此框置于屏幕中心?

css css-position centering

399
推荐指数
9
解决办法
54万
查看次数

如何将div中的按钮居中?

我有一个宽度为100%的div.

我想把一个按钮放在其中,我该怎么做?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>
Run Code Online (Sandbox Code Playgroud)

html css centering

193
推荐指数
7
解决办法
69万
查看次数

固定div的CSS水平居中?

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}
Run Code Online (Sandbox Code Playgroud)

我知道这个问题已经有一百万次,但我无法找到解决方案.我有一个div,应该固定在屏幕上,即使页面滚动它应该始终保持在屏幕中间的中心!

div应该有500px宽度,应该30px远离顶部(margin-top),对于所有浏览器大小,应该在页面中间水平居中,并且在滚动页面的其余部分时不应该移动.

那可能吗?

html css centering

170
推荐指数
7
解决办法
14万
查看次数

如何在WinForms中保持标签中心?

WinForms我使用a Label来显示不同的消息,如成功,失败等.

我想将中心标签置于中心位置.我想要一个解决方案,无论标签中只有一个单词还是整个句子,它都能保持居中.

.net c# winforms centering

129
推荐指数
5
解决办法
11万
查看次数

当侧面物品具有不同宽度时,保持中间物品居中

在此输入图像描述

想象一下以下布局,其中圆点表示框之间的空间:

[Left box]......[Center box]......[Right box]
Run Code Online (Sandbox Code Playgroud)

当我移除右边的盒子时,我喜欢中心盒仍然位于中心,如下所示:

[Left box]......[Center box].................
Run Code Online (Sandbox Code Playgroud)

如果我删除左框也是如此.

................[Center box].................
Run Code Online (Sandbox Code Playgroud)

现在,当中心框内的内容变得更长时,它将占用尽可能多的可用空间,同时保持居中.左边和右边框将永远不会收缩,因此当没有剩余空间的地方overflow:hidden,并text-overflow: ellipsis会在效果打破了内容;

[Left box][Center boxxxxxxxxxxxxx][Right box]
Run Code Online (Sandbox Code Playgroud)

以上都是我理想的情况,但我不知道如何实现这个效果.因为当我创建一个像这样的flex结构时:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}
Run Code Online (Sandbox Code Playgroud)

如果左右框的大小完全相同,我会得到所需的效果.然而,当两者中的一个来自不同尺寸时,居中的盒子不再真正居中.

有没有人可以帮助我?

更新

A justify-self会很好,这将是理想的:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}
Run Code Online (Sandbox Code Playgroud)

html css css3 centering flexbox

129
推荐指数
9
解决办法
4万
查看次数