中心div水平在它的父母父母小於那個孩子

基本上是標題。我想把孩子放在父母的中間，但孩子比父母大。我怎樣才能做到這一點？中心div水平在它的父母父母小於那個孩子

#cont { 
 
    width: 30%; 
 
    padding-top: 30%; 
 
    background-color: red; 
 
    margin: auto; 
 
} 
 

 
#main { 
 
    width: 130%; 
 
    padding-top: 30%; 
 
    background-color: blue; 
 
    margin: auto; 
 
}

<div id="cont"> 
 
    <div id="main"></div> 
 
</div>

來源

2017-04-24 sanjihan

position: absolute;和left:0;right:0;與margin: auto; 您可以根據您的規則，以你的情況與你的造型實現這個

.outer 
 
{ 
 
    width: 400px; 
 
    height: 400px; 
 
    background: red; 
 
    margin: 0 auto; 
 
    
 
} 
 
.inner 
 
{ 
 
    width: 600px; 
 
    height: 200px; 
 
    background: blue; 
 
    position: absolute; 
 
    left:0;right:0; 
 
    margin: auto; 
 
}

<div class="outer"> 
 
    <div class="inner"></div> 
 
</div>

來源

2017-04-24 10:07:36

你的例子有一個非常不同的css th OP的 – Swellar

@Tseseract我的答案旨在展示一種實現他想要的方式的可能方式。它不是基於他的代碼 –

如果你能根據OP提供的答案產生答案將是非常有用的。給出與OP不一樣的答案，可能會給OP帶來另一個思考如何將答案轉換爲他的需求，特別是因爲他提供了一個代碼。 – Swellar

基本上你可以這樣做。如果這是你的意思

#cont{ 
 
    width:30%; 
 
    padding-top:30%; 
 
    background-color:red; 
 
    margin: 0 auto; 
 
    position: relative; 
 

 
} 
 

 
#main{ 
 
    width:130%; 
 
    padding-top:30%; 
 
    background-color:blue; 
 
    text-align:center; 
 
    position: absolute; 
 
    top:35%; 
 
    left: 0; 
 
    z-index: 10; 
 
}

<div id="cont"> 
 
<div id="main"></div> 
 
</div>

來源

2017-04-24 10:12:46 k185

喜歡這個？這是水平居中僅使用transform: translate和position:absolute

#cont { 
 
    width: 30%; 
 
    padding-top: 30%; 
 
    background-color: red; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 

 
#main { 
 
    width: 130%; 
 
    padding-top: 30%; 
 
    background-color: blue; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translate(-50%, 0); 
 
}

<div id="cont"> 
 
    <div id="main"></div> 
 
</div>

來源

2017-04-24 10:14:56 Swellar

爲什麼downvoting這個答案？ – mjanisz1

@ mjanisz1有人做了投票。可惜他/她沒有留下解釋 – Swellar

如果你的DIV是大30％，比它的parrent你可以給它一個利潤率左-15％

#cont{ 
 
    width:30%; 
 
    padding-top:30%; 
 
    background-color:red; 
 
    margin:auto; 
 
} 
 

 
#main{ 
 
    width:130%; 
 
    padding-top:30%; 
 
    background-color:blue; 
 
    margin:auto; 
 
    text-align:center; 
 
    margin-left: -15%; 
 
}

<div id="cont"> 
 
<div id="main"></div> 
 
</div>

來源

2017-04-24 10:16:53

中心div水平在它的父母父母小於那個孩子

回答

相關問題