要居中一个HTML元素,我可以使用CSS左:50%;。但是,这使得元素相对于整个窗口居中。
我有一个元素,它是<div>元素的子元素,我想让子元素以<div>这个父元素居中,而不是整个窗口。
我不希望容器<div>的所有内容居中,只是一个特定的子。
要居中一个HTML元素,我可以使用CSS左:50%;。但是,这使得元素相对于整个窗口居中。
我有一个元素,它是<div>元素的子元素,我想让子元素以<div>这个父元素居中,而不是整个窗口。
我不希望容器<div>的所有内容居中,只是一个特定的子。
当前回答
左:50%分别工作到最近的父静态宽度分配。尝试宽度:500px或在父div。或者,让你需要的内容居中显示:块,并设置左右边距为auto。
其他回答
弯曲后,它显示文章
.container { 显示:flex; 颜色:蓝色; 背景颜色:黄色; justify-content:中心; } < div class = "容器" > < div > < / div元素> < / div > 如果你水平和垂直地设置元素中心。
.container { 显示:flex; 颜色:蓝色; 身高:100 px; 背景颜色:黄色; justify-content:中心; 对齐项目:中心; } < div class = "容器" > < div > < / div元素> < / div >
只需要给出父div的位置:relative
为您的元素创建一个新的div元素居中,然后添加一个类专门为该元素居中,如下所示
<div id="myNewElement">
<div class="centered">
<input type="button" value="My Centered Button"/>
</div>
</div>
Css
.centered{
text-align:center;
}
指定text-align: center;到父对象并显示:inline-block;到div。
只以特定的子为中心:
.parent { 身高:100 px; 背景颜色:灰色; 位置:相对; } .child { 背景颜色:白色; 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; 宽度:20 px; 高度:20 px; 保证金:汽车; } < div class = "父" > < span class = "孩子" >你好> < /跨度 < / div >
或者,你也可以使用flex,但是那样会把所有的子节点居中
.parent { 身高:100 px; 背景颜色:灰色; 显示:flex; justify-content:中心; 对齐项目:中心; } .child { 背景颜色:白色; } < div class = "父" > < span class = "孩子" >你好> < /跨度 < / div >