右divの内容に従って左divのテキストを中心に

Question

右divの内容に従って左divのテキストをdivの中心にします。

<div class="row"> 
 
    <div class="" style="float:left"> 
 
     <p style="color: #222;margin-bottom: 0; text-align:center;">08:30 - 09:30</p> 
 
    </div> 
 
    <div class=" agenda_name" style=" float:right;"> 
 
     <p style="font-weight: 400;">XYZXYZX</p> 
 
     <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
     <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
     <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    </div> 
 
</div>

期待される出力画像です。

ありがとうございました。

Answer 1

margin: 0 autoを追加し、display:tablepにタグ

<div class="row"> 
 
    <div class=""> 
 
    <p style="color: #222;margin-bottom: 0; margin: 0 auto; display:table;">08:30 - 09:30</p> 
 
    </div> 
 
    <div class=" agenda_name" style=" float:right;"> 
 
    <p style="font-weight: 400;">XYZXYZX</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    </div> 
 
</div>

Answer 2

<div class="row"> 
 
    <div class="" style="float:left; height: 30%; width:50%;"> 
 
    <p style="color: #222;margin-bottom: 0; text-align:center;">08:30 - 09:30</p> 
 
    </div> 
 
    <div class=" agenda_name" style=" float: right;height: 30%;width:50%;"> 
 
    <p style="font-weight: 400;">XYZXYZX</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    </div> 
 
</div>

Answer 3

div にfloat:leftを削除します以下のhtmlとcssコードを試してください。インラインCSSを削除してください。float：left;浮動小数点：右からdiv。

.section { 
 
    display: table; 
 
    height: inherit; 
 
    max-height: 100%; 
 
    width: 100%; 
 
} 
 
.row.content { 
 
    display: table-row; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.left_div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 50%; /* set width as per you needed */ 
 
} 
 
.right_div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 50%; /* set width as per you needed */ 
 
} 
 
.left_div > p { 
 
    text-align: center; 
 
}

<div class="section"> 
 
    <div class="row content"> 
 
     <div class="left_div" style=""> 
 

 
     <p>08:30 - 09:30</p> 
 
     </div>     
 
     <div class="right_div agenda_name" style=""> 
 
     <p style="font-weight: 400;">XYZXYZX</p> 
 
     <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
     <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 

 
     <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 4

左右両方のdivにheigthを与えます。表示を設定する：parent divへのテーブルとdisplay：table-cellとvertical-align：middle;左側のdivの子要素に垂直センターとhorizandally

.leftdiv, 
 
.agenda_name { 
 
    width: 50%; 
 
    height: 152px; 
 
} 
 
.leftdiv { 
 
    display: table; 
 
} 
 
.leftdiv p { 
 
    vertical-align: middle; 
 
    display: table-cell; 
 
}

<div class="row"> 
 
    <div class="leftdiv" style="float:left"> 
 
    <p style="color: #222;margin-bottom: 0; text-align:center;">08:30 - 09:30</p> 
 
    </div> 
 
    <div class="agenda_name" style=" float:right;"> 
 
    <p style="font-weight: 400;">XYZXYZX</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    <p style="font-weight: 400;">XYZXYZ Xdssgg</p> 
 
    </div> 
 
</div>