如何將此垂直對齊的div對齊到右側？

Question

我有一個安排如下：

<style> 
    .title { 
     background: red; 
    } 
    .outer { 
     display: inline-block; 
     border: 1px solid red; 
     background: green; 
    } 
    .inner { 
     display: inline-block; 
     vertical-align: middle; 
    } 
    .left { 
     background: yellow; 
    } 
    .right { 
     background: cyan; 
    } 
</style> 

<div class="outer"> 
    <div class="title">long title</div> 
    <div class="inner left"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    </div> 
    <div class="inner right"> 
    <div>1</div> 
    <div>2</div> 
    </div> 
</div> 

如何我可以用類right股利對齊到正確的？

結果可以在http://www.cssdesk.com/uCmVL

編輯

兩個內的div需要保持其垂直取向可以看出。即vertical-align: whatever;

編輯2

的佈局是有些複雜，它採用轉換爲放大和縮小，我試圖top: 50%; transform: translateY(-50%);在內部類，但它打破了計算放置SVG路徑元素

Answer 1

你可以做很多事Flexbox的。以下是您正在尋找的佈局示例。

.main-container { 
 
    background-color: #eee; 
 
} 
 
h1 { 
 
    text-align: center; 
 
} 
 
.columns { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.red { 
 
    background-color: #f00; 
 
} 
 

 
.blue { 
 
    background-color: #f99; 
 
}

<div class="main-container"> 
 
    <h1>Title</h1> 
 
    <div class="columns"> 
 
    <div class="column red"> 
 
     <p>First Row</p> 
 
     <p>Second Row</p> 
 
     <p>Third Row</p> 
 
    </div> 
 
    <div class="column blue"> 
 
     <p>Centered First Row</p> 
 
     <p>Centered Second Row</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

如果它總是會很難向右：

.right { 
    background: cyan; 
    float:right; 
} 

Answer 3

使您的外部股利定位相對，然後使右側股利絕對向右。像這樣

.outer { 

    position: relative; 

    display: inline-block; 
    border: 1px solid red; 
    background: green; 
} 

.right { 

    position: absolute; 
    right: 0; 

    background: cyan; 
} 

Answer 4

浮法right和left的div：

.left { 
    background: yellow; 
    float: left; 
} 
.right { 
    background: cyan; 
    float: right; 
} 

.title { 
 
    background: red; 
 
} 
 
.outer { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    background: green; 
 
} 
 
.inner { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.left { 
 
    background: yellow; 
 
    float: left; 
 
} 
 
.right { 
 
    background: cyan; 
 
    float: right; 
 
}

<div class="outer"> 
 
    <div class="title">long title</div> 
 
    <div class="inner left"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    </div> 
 
    <div class="inner right"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    </div> 
 
</div>

Answer 5

以前所有的解決方案，將其右對齊，howev呃他們不保持垂直對齊中間。要做到這一點，你需要切換到使用顯示：表&表格單元格或調整代碼絕對定位在相對定位的容器內使用頂部&右邊距。

如果您的表格不是動態的並且具有固定高度，則可以使用像素值作爲頂部定位，否則使用百分比播放。

http://www.cssdesk.com/H7pxN

.title { 
    background: red; 
} 

.outer { 
    position: relative; // 
    display: inline-block; 
    border: 1px solid red; 
    background: green; 
} 

.inner { 
    display: inline-block; 
    vertical-align: middle; 
} 

.left { 
    background: yellow; 
} 

.right { 
    position: absolute; // 
    right: 0; // 
    top: 40%; // 
    background: cyan; 
} 

Answer 6

還有，如果你身邊有固定寬度的容器（.outer），我張貼的問題都有着相同的固定寬度圖像中注意到一個工作，如果是的話，那麼給.right div position:relative，並設置left值等於.outer的固定寬度，然後將其x值翻譯爲-100%。

jsFiddle

.title { 
 
    background: red; 
 
} 
 
.outer { 
 
    display: inline-block; 
 
    border: 1px solid red; 
 
    background: green; 
 
    width: 70px; /* add this */ 
 
} 
 
.inner { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.left { 
 
    background: yellow; 
 
} 
 
.right { 
 
    background-color: cyan; 
 
    /* and add the below */ 
 
    position: relative; 
 
    left: 60px; 
 
    text-align: right; 
 
    transform: translateX(-100%); 
 
}

<div class="outer"> 
 
    <div class="title">long title</div> 
 
    <div class="inner left"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    </div> 
 
    <div class="inner right"> 
 
    <div>1</div> 
 
    <div>22</div> 
 
    </div> 
 
</div>

Answer 7

添加Flexbox的包裝元素的伎倆。

.title { 
    background: red; 
    text-align: center; 
} 

.outer { 
    display: inline-block; 
    border: 1px solid red; 
    background: green; 
    min-width: 200px; 
} 

.wrapper { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
} 

.left { 
    background: yellow; 
} 

.right { 
    background: cyan; 
    text-align: right; 
} 

<div class="outer"> 
    <div class="title">long title</div> 
    <div class="wrapper"> 
    <div class="left"> 
     <div>1</div> 
     <div>22</div> 
     <div>333</div> 
    </div> 
    <div class="right"> 
     <div>1</div> 
     <div>22</div> 
    </div> 
    </div> 
</div>