[英]How to center horizontally div inside parent div
How do I center a div
horizontally inside its parent div
with CSS
?如何使用
CSS
将div
在其父div
内水平居中?
<div id='parent' style='width: 100%;'>
<div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>
I am assuming the parent div has no width or a wide width, and the child div has a smaller width.我假设父 div 没有宽度或宽度较宽,而子 div 的宽度较小。 The following will set the margin for the top and bottom to zero, and the sides to automatically fit.
下面将设置顶部和底部的边距为零,边距自动适应。 This centers the div.
这使 div 居中。
div#child {
margin: 0 auto;
}
<div id='parent' style='width: 100%;text-align:center;'>
<div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>
Just out of interest, if you want to center two or more divs (so they're side by side in the center), then here's how to do it:只是出于兴趣,如果您想将两个或更多 div 居中(因此它们并排在中心),那么这里是如何做到的:
<div style="text-align:center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>
You can use the "auto" value for the left and right margins to let the browser distribute the available space equally at both sides of the inner div:您可以为左右边距使用“auto”值,让浏览器在内部 div 的两侧平均分配可用空间:
<div id='parent' style='width: 100%;'>
<div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>
.parent-container {
display: flex;
justify-content: center;
align-items: center;
}
.child-canvas {
flex-shrink: 0;
}
<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.