简体   繁体   English

如何居中div并保持对齐嵌套浮动div?

[英]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: leftfloat: right是这个。 But how would I make it? 但是我该怎么做呢?

I need all divs to be centered all along the screen ( viewport ?) 我需要所有div在屏幕上居中( viewport ?)

Also, the nested divs should be placed together, with no empty centering spaces between them. 此外,嵌套的div应该放在一起,它们之间没有空的居中空间。

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;
}

Fiddle :: full code 小提琴::完整代码

Removing the float for #A and #b will make you div s centered in the wrapper. 删除#A#bfloat将使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内的两个divmax-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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM