根据右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

将float:left移至div 将margin: 0 auto和display:table添加到p代码

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试下面的html和css代码，删除内联css float：left;并且浮动：正确来自你的div。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

给左右div加重。将display：table设置为parent div并显示：table-cell和vertical-align：middle;左侧div的子元素垂直和水平居中

.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>

Answer 4

＆＃13;

＆＃13;

<div class="row">
  <div class="" style="float:left; height: 30%; width:50%;">
    <p style="color: #222;margin-bottom: 0; text-align:center; margin-top: 25%">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>

＆＃13;

＆＃13;

＆＃13;