Question

请在JSFIDDLE查看我的代码，我想将所有框放在div内。我该怎么做？

enter image description here

任何帮助将不胜感激。

Answer 1

问题是.container上的浮点值，所以这样做：

.container {
    float: left; /* remove this */
    margin: 10pt auto; /* add this */
}

如果您需要居中对齐inline element（<span> <b> <i> ...）或inline- *元素，则可以将text-align: center;添加到其父容器。

如果您需要居中对齐block element（<div> <p> ...），您可以将margin-left: auto; margin-right: auto;添加到元素本身。

Answer 2

如果你想要水平中心你的.container，那么你应该不使用float属性但是将它们变成内联框通过display和inline-block或inline-table通过text-align:center。然后在家长，body或.grid-main上向您的jsfiddle申请body { text-align:center; } legend { display: block; width: 323px; margin: 0 auto 0 auto; font-size: 20px; font-family: sans-serif; } body { } .grid-main { width: auto; margin:auto; line-height: 12px; overflow: hidden; /* border: 1px solid #000; */ } .grid-sub { } .thumb { border-top-right-radius: 10px; border-top-left-radius: 10px; width: 323px; height: 160px; background-image: url(fashion.jpg); background-size: 323px 160px; } .clearfix { margin: 20px; } .container { -webkit-box-shadow: 0px 0px 27px -6px rgba(138, 138, 138, 1); -moz-box-shadow: 0px 0px 27px -6px rgba(138, 138, 138, 1); box-shadow: 0px 0px 27px -6px rgba(138, 138, 138, 1); width: 323px; height: auto; margin: 10pt; border: 1px solid #c0c0c0; border-radius: 10px; border-top: none; display:inline-block;/* NOT FLOAT */ text-align:left; } .top-res-box-overlay { background: rgba(0, 0, 0, .3); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(1%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, .65))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0)1%, rgba(0, 0, 0, .65)100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0)1%, rgba(0, 0, 0, .65)100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0, rgba(0, 0, 0, 0)1%, rgba(0, 0, 0, .65)100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000', GradientType=0); width: 100%; height: 100%; /*position: relative; */ display: block; border-radius: 10px 10px 0 0; } div.header { position: relative; height: 160px; width: 323px; } .box-name { font-size: 13pt; display: block; color: #fff; text-shadow: 0 0 1px rgba(0, 0, 0, .5); } .box-name-desc { font-size: 10pt; display: block; color: #fff; margin-top: 5px; font-weight: 100; text-shadow: 0 0 1px rgba(0, 0, 0, .5); } div.header div.title { position: absolute; bottom: 0px; color: #FFF; font-family: sans-serif; font-weight: bold; padding: 10px; } .content { width: 100%; /*border: 1px solid #c1c1c1; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;*/ } .bottom { position: absolute; bottom: 0; left: 0; } .context { padding: 10px; font-size: 13px; line-height: 150%; color: #9a9a9a; font-family: sans-serif; }。DEMO

＆＃13;

<body>
    <div class="grid-main">
        <div class="container">
            <div class="thumb">
                <div class="header">	<a href="#" class="top-res-box-overlay"></a>

                    <div class="title">	<span class="box-name">Header</span>
	<span class="box-name-desc">Tagline</span>

                    </div>
                </div>
            </div>
            <div class="content">
                <div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
            </div>
        </div>
        <div class="container">
            <div class="thumb">
                <div class="header">	<a href="#" class="top-res-box-overlay"></a>

                    <div class="title">	<span class="box-name">Header</span>
	<span class="box-name-desc">Tagline</span>

                    </div>
                </div>
            </div>
            <div class="content">
                <div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
            </div>
        </div>
        <div class="container">
            <div class="thumb">
                <div class="header">	<a href="#" class="top-res-box-overlay"></a>

                    <div class="title">	<span class="box-name">Title</span>
	<span class="box-name-desc">Tagline</span>

                    </div>
                </div>
            </div>
            <div class="content">
                <div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
            </div>
        </div>
        <div class="container">
            <div class="thumb">
                <div class="header">	<a href="#" class="top-res-box-overlay"></a>

                    <div class="title">	<span class="box-name">Title</span>
	<span class="box-name-desc">Tagline</span>

                    </div>
                </div>
            </div>
            <div class="content">
                <div class="context">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>
            </div>
        </div>
    </div>
</body>

＆＃13;

{{1}}

＆＃13;

Answer 3

如果你知道“div.title”的宽度和高度，你可以把它放在：

div.header div.title {
  left: 50%;
  top: 50%;
  margin-left: -XXpx;
  margin-top: -YYpx;
}

其中XX是宽度的一半，YY是高度的一半。

如何将div中的元素置于以下代码中心

3 个答案: