css居中动态div

Question

我有一个 div #content，其中我在运行时添加左浮动 div #block，并且在 div (a) 、#lcontent 和 #rcontent 的任一侧都有固定宽度的 div 当侧面 div 具有动态高度并且 #content 随时间变化时，我如何让 #content 保持在中心位置

无论里面有 2、3、4 或 100 个#block，内容都应该保持在中心。但是#block应该总是在#content的左边

只有#lcontent、#rcontent 和#block 具有固定宽度

html代码

<div id="contentcontainer">
    <div id="lcontent"></div>
    <div id="mcontent">
        <div id="content">
            <div id="block"></div>
            <div id="block"></div>
            <div id="block"></div>
            <div id="Block"></div>
            <div id="Block"></div>
        </div>
    </div>
    <div id="rcontent"></div>
</div>

css代码

#lcontent
{
float: left;
width: 100px;
min-width: 100px;
min-height: 100px;
background: lightblue;   
}
#rcontent
{
float: right;
width: 100px;
background: lightblue;
}
#mcontent
{
background: lightgrey;
float: right;
right: 50%;
position: relative;
}
#content 
{
float: right;
right: -50%;
position: relative;
background: green;
min-height: 200px;
text-align: center;
}
#block
{
margin: 5px;
width: 300px;
border: 1px solid red;
display: inline-block;½ 
height: 150px;   
}

Answer 1

使用纯 CSS 会非常困难，需要您了解 容器将拥有的框数（并根据它向父级添加一个类） - 如果这是动态内容，那么您应该为此使用服务器端语言。您还需要大量的媒体查询：

.container {
    text-align:center;
}
.centered {
    text-align:left;
    margin:auto;
}
.block {
    margin:3px;
    width:100px;
    height:100px;
    float:left;
    vertical-align:top;
    border:1px solid red;
}

.seven {max-width:770px;} /* this is the number of block * their outer width (margin + border + padding + width) */

/*one block*/
@media (max-width:219px) { /* this is the width of 2 blocks outer width -1px (you may need to add the width of the left and right column to this plus any left and right padding of the center column.  This is really the max width of the container div */
    .centered {
        width:110px; /* the outer width of a block */
    }
}

/*two blocks*/
/* keep adding media queries to either your max number of blocks or the largest screen size you want to support */
/*min width is 2 * 1 block outer width, max width is 3 * 1 block outer width - 1px*/
@media (min-width:220px) and (max-width:329px) {
    .centered {
        width:220px; /* the outer width of 2 blocks */
    }
}
@media (min-width:330px) and (max-width:439px) {
    .centered {
        width:330px;
    }
}
@media (min-width:440px) and (max-width:549px) {
    .centered {
        width:440px;
    }
}
@media (min-width:550px) and (max-width:659px) {
    .centered {
        width:550px;
    }
}
@media (min-width:660px) and (max-width:769px) {
    .centered {
        width:660px;
    }
}
@media (min-width:770px) and (max-width:879px) {
    .centered {
        width:770px;
    }
}
@media (min-width:880px) and (max-width:989px) {
    .centered {
        width:880px;
    }
}
@media (min-width:990px) and (max-width:1100px) {
    .centered {
        width:990px;
    }
}

<div class="container">
    <div class="centered seven"><!--the seven class is the number of children blocks-->
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Fiddle Example

Otherwise you can try a js solution

Answer 2

您可以将不可见的占位符添加到内联块的末尾。这将使最后一行左对齐。

http://jsfiddle.net/aakt65x4/

但是，如果您不填写第一行，则整个内容将显示为左对齐。但我想这就是你想要的，对吧？

HTML：

<!--
  Centers a group of boxes that wrap to the width of its container.
  Also left-aligns them inside the container.
  Issue: Does not center group if there aren't enough boxes to fill
  the first row.
  -->
<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>

    <!--
      How many placeholders do you need?
      At least the number of blocks minus two.
      -->
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
    <div class="placeholder"></div>
</div>

CSS：

body {
    text-align: center;     /* center a max-width container */
    font-size: 0;           /* remove spaces between blocks */
}
.container {                /* you don't need this */
    background-color: #eee; /* so you can see what's happening */
    max-width: 960px;       /* to demonstrate the centering of a max-width container */
    display: inline-block;  /* center the max-width container */
    text-align: center;     /* center the group of blocks */
}
.block {
    display: inline-block;  /* left-align within the group */
    background-color: red;  /* so you can see what's happening */
    height: 100px;
    width: 100px;
    margin: 10px;
}
.placeholder {
    display: inline-block;  /* add to the line of blocks */
    width: 120px;           /* width + margin of a block */
}