[英]How to center a div and keep the alignment to its nested floating divs?
I have wrapper
like div
which contains two nested divs. 我有像
div
一样的wrapper
,它包含两个嵌套的div。 I need them to be centered and I will add content (inputs) dynamically and I need one two be placed at the left and the other on the right side. 我需要它们居中,我会动态添加内容(输入),我需要一个放在左边,另一个放在右边。
I tried: 我试过了:
<div id="matriz">dsg
<div id="A">ds</div>
<div id="b">dsa</div>
</div>
With the following CSS: 使用以下CSS:
#matriz {
padding-top: 20px;
text-align: center;
}
#A {
float: left;
display: inline-block;
}
#b {
float: right;
display: inline-block;
}
However the inner divs are then not displayed centered but on the left and right extreme, there's an empty centered space. 然而,内部div然后不显示居中,但在左右极端,有一个空的居中空间。
I know float: left
and float: right
is making this. 我知道
float: left
和float: right
是这个。 But how would I make it? 但是我该怎么做呢?
viewport
?) viewport
?) You can use hack display: table-cell
for these 3 elements. 你可以使用hack
display: table-cell
来获得这3个元素。
#matriz {
padding-top: 20px;
text-align: center;
display: block;
width: 200px;
}
#A{
float: right;
text-align: left;
display: inline-block;
width: 50px;
}
#b{
float: left;
text-align: right;
display: inline-block;
width: 50px;
}
Removing the float
for #A
and #b
will make you div
s centered in the wrapper. 删除
#A
和#b
的float
将使div
在包装器中居中。 What you can do to align the two div always next to each other is set max-width
for the two div
s inside the wrapper div
. 你可以做的是将两个div始终彼此相邻地设置为
wrapper div
内的两个div
的max-width
。
Check this fiddle , might help you 检查这个小提琴 ,可能会帮助你
HTML: HTML:
<div id="matriz">
<div id="top">Top content</div>
<div id="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
CSS CSS
#matriz {
width:100%;
background-color:#ccc;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
overflow:hidden;
font-size:0;
}
#top{
width:100%;
background-color:blue;
font-size:16px;
}
#left {
background-color:yellow;
max-width:50%;
display: inline-block;
font-size:16px;
}
#right {
max-width:50%;
background-color:green;
display: inline-block;
font-size:16px;
}
Try this http://jsfiddle.net/JP5Eu/ 试试这个http://jsfiddle.net/JP5Eu/
HTML: HTML:
<div id="matriz" class="">
<div id="top">top</div>
<div id="a">left</div>
<div id="b">right</div>
</div>
CSS CSS
#matriz {
position:absolute;
width:100%;
padding-top: 20px;
text-align: center;
background:red;
}
#a {
width:50%;
float: left;
display: inline-block;
}
#b {
width:50%;
float: right;
display: inline-block;
}
Here is a different option. 这是一个不同的选择。
http://jsfiddle.net/DrewGoldsberry/JP5Eu/1/ http://jsfiddle.net/DrewGoldsberry/JP5Eu/1/
<div id="matriz" class="">
<div id="CenteredTag">
<div id="a">left</div>
<div id="b">right</div>
</div>
</div>
you can put the two tags inside of a container and set a max width. 您可以将两个标签放在容器内并设置最大宽度。 then center that tag.
然后居中那个标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.