web-dev-qa-db-ja.com

左、中央、右のdivを同じ線の下に揃えます

同じ行に表示したい3つのdivがあります。 3つはそれぞれ幅と高さが異なり、ストレートテキストではありません。 1つを左揃え（左端まで）、もう1つを右揃え（右端まで）、3番目を中央揃え（含まれているdivの中央、この場合はページ全体）にします。 ）。

さらに、3つのdivを、含まれているdivの下部に垂直に配置したいと思います。私が持っている解決策は、それらを含むdivの上部に垂直に配置します。

これを処理するための最良の方法は何ですか？

csshtmlalignmentcentervertical-alignment
18
jrdioko

コンテナのdivをposition:relativeに設定し、子のdivをposition:absoluteに設定することで、コンテナの範囲内でdivを絶対的に配置できます。

これにより、bottom:0pxを使用してすべてをコンテナの下部に垂直に配置し、次に左右のスタイルを使用して水平軸に沿って配置できるため、簡単になります。

動作するjsFiddleをセットアップしました： http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ そしてコードは次のとおりです：

HTML：

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>

CSS：

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

注：「中央」divの場合、margin-left = divの幅の1/2 :)

お役に立てば幸いです:)

20
Damien-Wright

私のテクニックは@ Damien-at-SFに似ています：

私はあなたが求めたすべての要件を厳密に実証しようとしました。

ライブデモ

HTML：

<div id="container">

    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>

</div>

CSS：

#container {
    position: relative;
    height: 400px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;

    background: #ccc
}
#left, #right, #mid {
    position: absolute;
    bottom: 0;
}
#left {
    left: 0;
    width: 80px;
    height: 200px;

    background: red
}
#right {
    right: 0;
    width: 120px;
    height: 170px;

    background: blue
}

#mid {
    left:50%;

    margin-left: -80px;
    width: 160px;
    height: 300px;

    background: #f39
}
4
thirtydot

センターdivを弾力的にするには、次のようにします。

<div style="display:table; width:500px;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:50px;"></div>
    <div style="display:table-cell;"></div>
    <div style="display:table-cell; width:50px;"></div>
  </div>
</div>
2
Babiker

最初の答えのさらなる強化：

「center」divCSSで、以下を追加する必要があります。

text-align:center;

「正しい」divCSSに、以下を追加する必要があります。

text-align:right;

...左/中央/右の位置合わせを完全に実現します。

1
FoulFoot

align-items: flex-end flexboxアイテムを下部に垂直に配置します。

.container {
  display: flex;
  height: 300px;
  min-width: 400px;
  background-color: #61a0f8;
  justify-content: space-between;
  align-items: flex-end;
}

.item {
  width: 100px;
  height: 120px;
  background-color: #f08bc3;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  width: 140px;
  height: 240px;
}
<div class="container">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
</div>
0
Penny Liu

含まれているdivにposition: relativeを設定し、3つのdivにposition: relativeを設定し、3つのdivのbottom属性を0に設定します。

bottom: 0
0
Satya