如何使用CSS <div>在另一个内部水平居中<div>?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我想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)中垂直居中?
如何在Twitter Bootstrap 3中将容器中的一个列大小的div(12列)居中.
请看起初小提琴.
.centered {
background-color: red;
}Run Code Online (Sandbox Code Playgroud)
所以,我想要一个div类.centered,在容器中居中.如果有多个div,我可以使用一行,但是现在我只想要一个在容器中居中的一列大小的div(12列).
我也不确定上述方法是否足够好,因为意图不是要抵消div一半.我不需要外面的自由空间div和div收缩比例的内容.我想将div外部空间均匀分布(缩小到容器宽度==一列).
我有一个问题集中在属性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)
<div>在页面上垂直和水平居中元素的最佳方法是什么?
我知道这margin-left: auto; margin-right: auto;将以水平为中心,但垂直做的最佳方式是什么?
我想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将此框置于屏幕中心?
我有一个宽度为100%的div.
我想把一个按钮放在其中,我该怎么做?
<div style="width:100%; height:100%; border: 1px solid">
<button type="button">hello</button>
</div>Run Code Online (Sandbox Code Playgroud) #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),对于所有浏览器大小,应该在页面中间水平居中,并且在滚动页面的其余部分时不应该移动.
那可能吗?
在WinForms我使用a Label来显示不同的消息,如成功,失败等.
我想将中心标签置于中心位置.我想要一个解决方案,无论标签中只有一个单词还是整个句子,它都能保持居中.
想象一下以下布局,其中圆点表示框之间的空间:
[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)