[英]Aligning a div with 2 divs inside it in Center
Currently im trying to get 2 divs to align in center, but not quite sure how to do it. 目前,我正在尝试获取2个div以使其居中对齐,但还不确定如何做到这一点。 They go to the Left side by default. 默认情况下,它们转到左侧。
I had margin-left:14 % and it would align it somewhat in the center, but when you re-sized the window it would look weird because it aligned to the right side. 我有margin-left:14%,它将在中心对齐一些,但是当您调整窗口大小时,它看起来很奇怪,因为它与右侧对齐。
tried with with with marign-left/right:auto, but no result. 与marign-left / right:auto一起尝试过,但没有结果。
html html
<div id="panels">
<div id="panel-left">
</div>
<div id="panel-right">
</div>
css 的CSS
#panels{ padding-top:15px; margin-left: auto; margin-right: auto; } #panel-left{ width:32%; min-width:209px; overflow:hidden; background-color:white; float:left; padding-left:25px; height:473px; } #panel-right{ width:32%; min-width:209px; height:473px; background-color:white; float:left; padding-left:25px; }
Try this: 尝试这个:
CSS 的CSS
#panels{
padding-top:15px;
text-align:center;
display: block;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:black;
height:473px;
display: inline-block;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:orange;
display: inline-block;
}
Try this style, I have used the box sizing css property to take care of the inherent 1px space that occurs during inline styling. 尝试这种样式,我使用了框大小的css属性来照顾内联样式化过程中固有的1px空间。
Of course there was an un-closed div element in your initial code which is fixed now. 当然,您的初始代码中有一个未关闭的div元素,现已修复。
So the CSS looks like, 所以CSS看起来像
#panels {
padding-top:15px;
margin: 0 auto;
background: cyan;
width:50%; /* u need this */
height:500px;
}
#panel-left {
width:50%;
box-sizing:border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow:hidden;
background-color:gray;
float:left;
padding-left:25px;
height:473px;
border:1px solid #000;
}
#panel-right {
width:50%;
box-sizing:border-box;
/*min-width:209px;*/
height:473px;
background-color:white;
float:left;
padding-left:25px;
border:1px solid #000;
}
Code snippet:: 程式码片段::
#panels { padding-top: 15px; margin: 0 auto; background: cyan; width: 50%; /* u need this */ height: 500px; } #panel-left { width: 50%; box-sizing: border-box; /* min-width:209px; By doing this you are pretty much giving the width to be 100 % */ overflow: hidden; background-color: gray; float: left; padding-left: 25px; height: 473px; border: 1px solid #000; } #panel-right { width: 50%; box-sizing: border-box; /*min-width:209px;*/ height: 473px; background-color: white; float: left; padding-left: 25px; border: 1px solid #000; }
<div id="panels"> <div id="panel-left">left</div> <div id="panel-right">right</div> </div>
Hope this helps. 希望这可以帮助。 Happy Coding :) 快乐编码:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.