Выраўнаваць элемент, выкарыстоўваючы яго даччыны элемент

Структура HTML выглядае наступным чынам:

<div id="c1">
  <div id="c2">
    <div id="d1"></div>
    <div id="d2"></div>
  </div>
</div>

I want #c2 to be aligned vertically inside #c1 in such a way that #d2 verticaly centered inside #c1. Here is clarifying picture: enter image description here

Гэта нармальна, калі ён будзе працаваць толькі ў апошняй Chrome. Дзякуючы.

UPD: Heights of #d1 and #d2 are not fixed. Distance between #d1 and #d2 is fixed.

UPD2: You can forget about #c2. I want #d1 and #d2 to be placed one after another and #d2 to be centered in #c1.

0
Вы маеце на ўвазе выраўноўванне па цэнтры # c2 па гарызанталі і па вертыкалі # d2?
дададзена аўтар Bram Vanroy, крыніца
Праверце гэта спасылка можа дапамагчы вам.
дададзена аўтар Mr_Green, крыніца
@dzhioev Я ўпэўнены, што вы спрабуеце дасягнуць не ўдаецца, выкарыстоўваючы чысты CSS.
дададзена аўтар Mr_Green, крыніца
@Mr_Green, я хачу, каб пазбегнуць выкарыстання JS.
дададзена аўтар dzhioev, крыніца
@Mr_Green, я хачу, каб пазбегнуць выкарыстання JS.
дададзена аўтар dzhioev, крыніца
@Mr_Green, я хачу, каб пазбегнуць выкарыстання JS.
дададзена аўтар dzhioev, крыніца
@Passerby, # c1 зафіксаваў heigth і гэтага дастаткова, каб размясціць элементы, як я апісаў.
дададзена аўтар dzhioev, крыніца
@Passerby, # c1 зафіксаваў heigth і гэтага дастаткова, каб размясціць элементы, як я апісаў.
дададзена аўтар dzhioev, крыніца
@Passerby, # c1 зафіксаваў heigth і гэтага дастаткова, каб размясціць элементы, як я апісаў.
дададзена аўтар dzhioev, крыніца
@VolkerE. абноўлены пытанне.
дададзена аўтар dzhioev, крыніца
Вы можаце выкарыстоўваць ўласцівасць CSS «маржу».
дададзена аўтар Mahesh Patidar, крыніца
@dzhioev Каб падмануць яго: jsfiddle.net/cyZcH/2 :)
дададзена аўтар Passerby, крыніца
@dzhioev Каб падмануць яго: jsfiddle.net/cyZcH/2 :)
дададзена аўтар Passerby, крыніца
@dzhioev Каб падмануць яго: jsfiddle.net/cyZcH/2 :)
дададзена аўтар Passerby, крыніца
@dzhioev Каб падмануць яго: jsfiddle.net/cyZcH/2 :)
дададзена аўтар Passerby, крыніца
@dzhioev За абнаўленне, што, калі вышыня # d1 + вышыня # D2 + адлегласць перавышае «сярэднюю» частка # c1? З'яўляецца # c1 аўто вышыня?
дададзена аўтар Passerby, крыніца
@dzhioev Я таксама. Я прадумаў адноснае і абсалютнае становішча, пачынаючы з ніжняй часткай, адмоўных палёў, але я не бачу магчымасці, таму што, вы хочаце расці ад цэнтра вертыкальна ў двух напрамкаў. І гэта ІМХО не ўяўляецца магчымым толькі ў CSS.
дададзена аўтар Volker E., крыніца
@dzhioev Я таксама. Я прадумаў адноснае і абсалютнае становішча, пачынаючы з ніжняй часткай, адмоўных палёў, але я не бачу магчымасці, таму што, вы хочаце расці ад цэнтра вертыкальна ў двух напрамкаў. І гэта ІМХО не ўяўляецца магчымым толькі ў CSS.
дададзена аўтар Volker E., крыніца
@dzhioev Я таксама. Я прадумаў адноснае і абсалютнае становішча, пачынаючы з ніжняй часткай, адмоўных палёў, але я не бачу магчымасці, таму што, вы хочаце расці ад цэнтра вертыкальна ў двух напрамкаў. І гэта ІМХО не ўяўляецца магчымым толькі ў CSS.
дададзена аўтар Volker E., крыніца
@dzhioev Я таксама. Я прадумаў адноснае і абсалютнае становішча, пачынаючы з ніжняй часткай, адмоўных палёў, але я не бачу магчымасці, таму што, вы хочаце расці ад цэнтра вертыкальна ў двух напрамкаў. І гэта ІМХО не ўяўляецца магчымым толькі ў CSS.
дададзена аўтар Volker E., крыніца
Вы ведаеце, як любая вышыня скрынкі фіксаванай?
дададзена аўтар Volker E., крыніца

11 адказы

Так што ў рэшце рэшт я знайшоў рашэнне сам. Ён працуе толькі для Chrome з-за «-webkit- *» уласцівасцяў, але я думаю, што гэта можа быць лёгка прыняты для любога сучаснага браўзэра. Асноўная ідэя заключаецца ў тым, каб выкарыстоўваць пераўтварэнне, паколькі пераўтварэнне можа спасылацца (выкарыстоўваючы працэнт) да памераў самога элемента, а не да памерах свайго бацькі. CSS выглядае наступным чынам:

div {
    border: 1px solid;
}

#c1 {
    height: 400px;
    width: 400px;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

#c2 {
    width: 350px;
    position: relative;
}

#d1 {
    width: 200px;
    position: absolute;
    left: 50%;
    top: -20px; /* distance between #d1 and #d2 */
    -webkit-transform: translate(-50%, -100%);
}

#d2 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

JSFIDDLE

0
дададзена

Так што ў рэшце рэшт я знайшоў рашэнне сам. Ён працуе толькі для Chrome з-за «-webkit- *» уласцівасцяў, але я думаю, што гэта можа быць лёгка прыняты для любога сучаснага браўзэра. Асноўная ідэя заключаецца ў тым, каб выкарыстоўваць пераўтварэнне, паколькі пераўтварэнне можа спасылацца (выкарыстоўваючы працэнт) да памераў самога элемента, а не да памерах свайго бацькі. CSS выглядае наступным чынам:

div {
    border: 1px solid;
}

#c1 {
    height: 400px;
    width: 400px;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

#c2 {
    width: 350px;
    position: relative;
}

#d1 {
    width: 200px;
    position: absolute;
    left: 50%;
    top: -20px; /* distance between #d1 and #d2 */
    -webkit-transform: translate(-50%, -100%);
}

#d2 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

JSFIDDLE

0
дададзена

Так што ў рэшце рэшт я знайшоў рашэнне сам. Ён працуе толькі для Chrome з-за «-webkit- *» уласцівасцяў, але я думаю, што гэта можа быць лёгка прыняты для любога сучаснага браўзэра. Асноўная ідэя заключаецца ў тым, каб выкарыстоўваць пераўтварэнне, паколькі пераўтварэнне можа спасылацца (выкарыстоўваючы працэнт) да памераў самога элемента, а не да памерах свайго бацькі. CSS выглядае наступным чынам:

div {
    border: 1px solid;
}

#c1 {
    height: 400px;
    width: 400px;
    display: -webkit-flex;
    -webkit-flex-flow: column;
    -webkit-justify-content: center;
    -webkit-align-items: center;
}

#c2 {
    width: 350px;
    position: relative;
}

#d1 {
    width: 200px;
    position: absolute;
    left: 50%;
    top: -20px; /* distance between #d1 and #d2 */
    -webkit-transform: translate(-50%, -100%);
}

#d2 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

JSFIDDLE

0
дададзена

Выкарыстоўвайце Дысплей: табліца-элементная і вертыкальнай Align: midddle на бацькоўскі DIV

#c1{
    display:table-cell;
    border:red solid 1px;
    width:600px;
    height:300px;
     vertical-align:middle;
    text-align:center
}
#c2{
    border:green solid 1px;
    width:300px;
    margin:0 auto

}

<�Моцны> DEMO

0
дададзена
Ваша рашэнне з'яўляецца няправільным. jsfiddle.net/7tvxM/2 - як вы можаце бачыць # d2 ня па цэнтры.
дададзена аўтар dzhioev, крыніца
І я спадзяюся, што вам не трэба вертыкальнае сярэдняе выраўноўванне на # c2, калі не выдаліць дысплей: настольныя вочкі і вертыкальнае выраўноўванне: midddle. jsfiddle.net/7tvxM/4
дададзена аўтар Sowmya, крыніца
@dzhioev R ў новай для HTML/CSS ?? Абнаўленне дэма тут jsfiddle.net/7tvxM/3 . Я думаў, што вы можаце зрабіць гэта, прымаючы спасылку бацькоўскіх спраў.
дададзена аўтар Sowmya, крыніца

Выкарыстоўвайце Дысплей: табліца-элементная і вертыкальнай Align: midddle на бацькоўскі DIV

#c1{
    display:table-cell;
    border:red solid 1px;
    width:600px;
    height:300px;
     vertical-align:middle;
    text-align:center
}
#c2{
    border:green solid 1px;
    width:300px;
    margin:0 auto

}

<�Моцны> DEMO

0
дададзена
Ваша рашэнне з'яўляецца няправільным. jsfiddle.net/7tvxM/2 - як вы можаце бачыць # d2 ня па цэнтры.
дададзена аўтар dzhioev, крыніца
@dzhioev R ў новай для HTML/CSS ?? Абнаўленне дэма тут jsfiddle.net/7tvxM/3 . Я думаў, што вы можаце зрабіць гэта, прымаючы спасылку бацькоўскіх спраў.
дададзена аўтар Sowmya, крыніца
І я спадзяюся, што вам не трэба вертыкальнае сярэдняе выраўноўванне на # c2, калі не выдаліць дысплей: настольныя вочкі і вертыкальнае выраўноўванне: midddle. jsfiddle.net/7tvxM/4
дададзена аўтар Sowmya, крыніца

Выкарыстоўвайце Дысплей: табліца-элементная і вертыкальнай Align: midddle на бацькоўскі DIV

#c1{
    display:table-cell;
    border:red solid 1px;
    width:600px;
    height:300px;
     vertical-align:middle;
    text-align:center
}
#c2{
    border:green solid 1px;
    width:300px;
    margin:0 auto

}

<�Моцны> DEMO

0
дададзена
Ваша рашэнне з'яўляецца няправільным. jsfiddle.net/7tvxM/2 - як вы можаце бачыць # d2 ня па цэнтры.
дададзена аўтар dzhioev, крыніца
@dzhioev R ў новай для HTML/CSS ?? Абнаўленне дэма тут jsfiddle.net/7tvxM/3 . Я думаў, што вы можаце зрабіць гэта, прымаючы спасылку бацькоўскіх спраў.
дададзена аўтар Sowmya, крыніца
І я спадзяюся, што вам не трэба вертыкальнае сярэдняе выраўноўванне на # c2, калі не выдаліць дысплей: настольныя вочкі і вертыкальнае выраўноўванне: midddle. jsfiddle.net/7tvxM/4
дададзена аўтар Sowmya, крыніца

Выкарыстоўвайце Дысплей: табліца-элементная і вертыкальнай Align: midddle на бацькоўскі DIV

#c1{
    display:table-cell;
    border:red solid 1px;
    width:600px;
    height:300px;
     vertical-align:middle;
    text-align:center
}
#c2{
    border:green solid 1px;
    width:300px;
    margin:0 auto

}

<�Моцны> DEMO

0
дададзена
Ваша рашэнне з'яўляецца няправільным. jsfiddle.net/7tvxM/2 - як вы можаце бачыць # d2 ня па цэнтры.
дададзена аўтар dzhioev, крыніца
@dzhioev R ў новай для HTML/CSS ?? Абнаўленне дэма тут jsfiddle.net/7tvxM/3 . Я думаў, што вы можаце зрабіць гэта, прымаючы спасылку бацькоўскіх спраў.
дададзена аўтар Sowmya, крыніца
І я спадзяюся, што вам не трэба вертыкальнае сярэдняе выраўноўванне на # c2, калі не выдаліць дысплей: настольныя вочкі і вертыкальнае выраўноўванне: midddle. jsfiddle.net/7tvxM/4
дададзена аўтар Sowmya, крыніца

HTML :

<div id="c1" style="height:200px;width:250px;">
    <div id="c2" style="height:150px;width:210px;">
        <div id="d1" style="height:50px;width:100px;"></div>
        <div id="d2" style="height:50px;width:100px;"></div>
    </div>
</div>

CSS:

div{
    border:1px solid #ccc;
    padding:5px;
    margin:auto;
}

Праверце JSFiddle .

0
дададзена

HTML :

<div id="c1" style="height:200px;width:250px;">
    <div id="c2" style="height:150px;width:210px;">
        <div id="d1" style="height:50px;width:100px;"></div>
        <div id="d2" style="height:50px;width:100px;"></div>
    </div>
</div>

CSS:

div{
    border:1px solid #ccc;
    padding:5px;
    margin:auto;
}

Праверце JSFiddle .

0
дададзена

HTML :

<div id="c1" style="height:200px;width:250px;">
    <div id="c2" style="height:150px;width:210px;">
        <div id="d1" style="height:50px;width:100px;"></div>
        <div id="d2" style="height:50px;width:100px;"></div>
    </div>
</div>

CSS:

div{
    border:1px solid #ccc;
    padding:5px;
    margin:auto;
}

Праверце JSFiddle .

0
дададзена

HTML :

<div id="c1" style="height:200px;width:250px;">
    <div id="c2" style="height:150px;width:210px;">
        <div id="d1" style="height:50px;width:100px;"></div>
        <div id="d2" style="height:50px;width:100px;"></div>
    </div>
</div>

CSS:

div{
    border:1px solid #ccc;
    padding:5px;
    margin:auto;
}

Праверце JSFiddle .

0
дададзена