嘗試使用CSS垂直和水平居中子元素

我如何能夠根據父級垂直和水平地使用子元素。嘗試使用CSS垂直和水平居中子元素

#bigBanner { 
position: relative; 
width: 960px; 
height: 483px; 
margin: 0 auto; 
background-image:url(../wpimages/sliderbg.jpg); 
} 

#bannerQuote { 
width: 518px; 
height: 127px; 
margin: 0 auto; 
background-color: #0d0f11; 
opacity: 0.95; 
filter:Alpha(opacity=95); 
}

是代碼，與bannerQuote確切地說是在bigBanner的中間。我將如何實現這一目標？我有一種感覺，這很簡單。

感謝

來源

2013-04-22 rich1334

你可以做這樣的事情......

#bannerQuote { 
    position:absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -259px; 
    margin-top: -64px; 
    width: 518px; 
    height: 127px; 
    background-color: #0d0f11; 
    opacity: .95; 
    filter:Alpha(opacity=95); 
}

其中利潤率左和上邊距是由你的高度和寬度來確定。由於您將左上角設置爲父容器的中心，因此您需要將子元素的一半寬度重新放回左側，並將其一半高度向上移回頂部。

來源

2013-04-22 19:17:29 fletch

只要你有在specifc高度父元素特定的高度和寬度的孩子和寬度你可能只是位置的子從頂部和左側絕對的。像：

#bannerQuote { 
position:absolute; 
top: 178px; 
left: 221px; 
width: 518px; 
height: 127px; 
margin: 0 auto; 
background-color: #0d0f11; 
opacity: 0.95; 
filter:Alpha(opacity=95); 
}

如果你想定位與已知的高度和寬度的孩子在父母與動態值看fletchs答案。

來源

2013-04-22 19:55:43 xate

嘗試使用CSS垂直和水平居中子元素

回答

相關問題