我有这个css:
#manipulate { position:absolute; width:300px; height:300px; background:#063; bottom:0px; right:25%; }
我有这个html:
<div id="manipulate" align="center"> </div>
我们如何将div放置在屏幕底部的中心位置?!?
yqlxgs2m1#
如果您不习惯使用负边距,请查看以下内容。
HTML -
<div> Your Text </div>
CSS -
div { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, -50%); margin: 0 auto; }
当您不知道div的宽度时特别有用。
guicsvcw2#
align="center"不起作用。由于您有position:absolute,我建议将其放置在距左侧50%的位置,然后从其左边距中减去其宽度的一半。
align="center"
position:absolute
#manipulate { position:absolute; width:300px; height:300px; background:#063; bottom:0px; right:25%; left:50%; margin-left:-150px; }
hvvq6cgz3#
使用负边距:
#manipulate { position:absolute; width:300px; height:300px; margin-left:-150px; background:#063; bottom:0px; left:50%; }
这里的关键是width、left和margin-left属性。
width
left
margin-left
goucqfw64#
下面是一个包含两个div的解决方案:于飞:
<div id="footer"> <div id="center"> Text here </div> </div>
CSS:
#footer { position: fixed; bottom: 0; width: 100%; } #center { width: 500px; margin: 0 auto; }
3qpi33ja5#
使用Flexbox对我很有效:
#manipulate { position: absolute; width: 100%; display: flex; justify-content: center; // Centers the item bottom: 10px; // Moves it up a little from the bottom }
n53p2ov06#
您可以使用负边距将其居中,但请注意,如果任何包含div的div未设置为position:relative,则它将精确地居中在屏幕的中心;例如. http://jsfiddle.net/aWNCm/因此,使此div精确居中最好方法是为其包含div设置正确属性位置属性,否则它将以某种随机方式丢失
8gsdolmq7#
100%工作单行(内联CSS求解)
<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>
5sxhfpxr8#
8条答案
按热度按时间yqlxgs2m1#
如果您不习惯使用负边距,请查看以下内容。
HTML -
CSS -
当您不知道div的宽度时特别有用。
guicsvcw2#
align="center"
不起作用。由于您有
position:absolute
,我建议将其放置在距左侧50%的位置,然后从其左边距中减去其宽度的一半。hvvq6cgz3#
使用负边距:
这里的关键是
width
、left
和margin-left
属性。goucqfw64#
下面是一个包含两个div的解决方案:
于飞:
CSS:
3qpi33ja5#
使用Flexbox对我很有效:
n53p2ov06#
您可以使用负边距将其居中,但请注意,如果任何包含div的div未设置为position:relative,则它将精确地居中在屏幕的中心;
例如. http://jsfiddle.net/aWNCm/
因此,使此div精确居中最好方法是为其包含div设置正确属性位置属性,否则它将以某种随机方式丢失
8gsdolmq7#
100%工作单行(内联CSS求解)
5sxhfpxr8#
100%工作单行(内联CSS求解)