0

我有一个带有以下 css 的 div 元素，我需要将它放在父容器中：

 <div id='download_confirm'>DOWNLOAD STARTED</div>

.download_confirm{
    position:absolute;
    top:0px;
    left:0px;
    padding:10px;

    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;

    background:#ccc;

}

我怎样才能做到这一点？

4

4 回答 4

1

首先，给position:relative你 div 的父元素。

1) - 如果您希望此 div 水平和垂直居中，则：

.download_confirm{
    position:absolute;
    width:200px;
    height: 90px;
    top:50%;
    left:50%;
    padding:10px;

    margin-top: -45px;
    margin-left: -100px;

    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;

    background:#ccc;
}

.

2) - 如果您希望您的 div 仅水平居中，则：

.download_confirm{
    position:absolute;
    width:200px;
    height: 90px;

    padding:10px;
    margin: 0 auto;

    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;

    background:#ccc;
}
于 2013-10-21T16:54:18.190 回答
0

如果没有宽度或高度，那么这将是解决方案，

这会将divwith position:absoluteinrelative与 parent 一起定位div，

.download_confirm{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;

    padding:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#fff;
    background:#ccc;
}
<div class="download_confirm">DOWNLOAD STARTED</div>

并检查一下：绝对水平和垂直居中在 CSS中非常有用。

你只需要这个，就这么简单，不需要知道宽度、高度，什么都没有：

于 2013-10-21T16:45:30.743 回答
0

如果你只想要水平尾中心然后给你的 div 一个宽度并将左右边距设置为自动。失去位置，顶部和左侧的 css 线。

但如果你想要垂直和水平中心，我建议使用 javascript 来获取视口大小，然后设置左侧和顶部位置。更简单的解决方案是使用引导程序或其他一些框架警报插件。

请参阅： http: //getbootstrap.com/index.html 或 http://jqueryui.com/

.download_confirm{

width: 100px;
margin: 0px auto;
padding:10px;

font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#fff;

background:#ccc;

}

于 2013-10-21T16:51:52.073 回答
0

使用 # 选择 id 而不是表示类选择的句点，然后将 width 和 margin-left 和 margin-right 设置为 auto

于 2013-10-21T16:52:07.790 回答