css 居中动态 div

Question

我有一个 div #content，我在运行添加左浮动 divs #block 并且有 divs 两边固定宽度div (a) 、#lcontent 和 #rcontent 当 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 这将非常困难，需要您了解容器将拥有的盒子数量（并根据它向父级添加 class）- 如果这是动态内容，那么您应该为此使用服务器端语言。您还需要大量的媒体查询：

.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 */
}

css 居中动态 div

css centering dynamic div

html

css

center

dynamic