2
Q
如何從下面的代碼
A
回答
1
如果你的意思是水平中心您.container，那麼，你應該不使用float properti而是通過display與inline-block或inline-table把它們變成直列框。 然後在您的jsfiddle上申請：text-align:center父母，這裏body或.grid-main。 DEMO
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;
\t border-bottom-left-radius: 10px;
\t 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;
}<body>
<div class="grid-main">
<div class="container">
<div class="thumb">
<div class="header"> \t <a href="#" class="top-res-box-overlay"></a>
<div class="title"> \t <span class="box-name">Header</span>
\t <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"> \t <a href="#" class="top-res-box-overlay"></a>
<div class="title"> \t <span class="box-name">Header</span>
\t <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"> \t <a href="#" class="top-res-box-overlay"></a>
<div class="title"> \t <span class="box-name">Title</span>
\t <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"> \t <a href="#" class="top-res-box-overlay"></a>
<div class="title"> \t <span class="box-name">Title</span>
\t <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>
-1
如果您知道寬度和「div.title」的高度，你可以把：
div.header div.title {
left: 50%;
top: 50%;
margin-left: -XXpx;
margin-top: -YYpx;
}
其中xx是寬度的一半，YY是高度的一半。
+0
你誤解了我的問題，我想把框放在中間，而不是標題！ – 2015-03-13 18:09:54
2
的問題是.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;添加到元素本身。
+0
沒有改進，同樣的輸出 – 2015-03-13 18:31:08
+0
你可以編輯我的jsfiddle – 2015-03-13 18:31:24
+0
http://jsfiddle.net/dkw6vyau/2/ – Stickers 2015-03-13 18:32:08
相關問題
- 1. 如何從源代碼下載頁面
- 2. 如何從下面的代碼編寫TDD代碼？
- 3. 如何解碼下面的代碼
- 4. 如何運行下面的jQuery代碼
- 5. 我如何結合下面的代碼？
- 6. 如何讓下面的代碼差值
- 7. 如何理解下面的nodejs代碼？
- 8. 如何加快下面的python3代碼？
- 9. 如何使下面的代碼更快？
- 10. 如何獲得在下面的代碼
- 11. 如何優化下面的jQuery代碼？
- 12. 如何理解下面的C++代碼？
- 13. 如何簡化下面的代碼
- 14. 如何解釋下面的代碼？
- 15. 如何解決下面的代碼java.lang.StackOverflowError？
- 16. 如何解決下面的htaccess代碼
- 17. 我如何解決下面的代碼？
- 18. JQuery - 下面的代碼如何工作？
- 19. 如何對齊下面的代碼
- 20. 如何解析下面的xml代碼？
- 21. 如何生成與下面的代碼
- 22. 如何使下面的代碼通用？
- 23. 如何在下面的代碼
- 24. 如何讓下面的代碼更好？
- 25. 如何通過下面的代碼
- 26. 如何從下面的代碼獲得的複選框VALU
- 27. 在下面的代碼中從「id」列
- 28. 從下面的代碼由WordPress
- 29. Magento的 - 如與下面的代碼從頁腳CMS頁面
- 30. 我們如何轉換下面的代碼在RxJava代碼
你的問題不清楚。 – 2015-03-13 18:06:47
我想將主框中的方框居中 – 2015-03-13 18:07:55
您的意思是標題和標語？ – 2015-03-13 18:10:33