将内部div在垂直，水平中心与父div对齐，而不对以下span文本元素进行换行

Question

如果我没有让父容器成为$ pp43 attempting to send: [16807] (len 5) Child 1: 69198; child 2: 69199 number received: 16807 attempting to send: [282475249] (len 9) number received: 282475249 attempting to send: [162265007] (len 9) number received: 162265007 attempting to send: [984943658] (len 9) number received: 984943658 attempting to send: [114410893] (len 9) number received: 114410893 attempting to send: [470211272] (len 9) number received: 470211272 attempting to send: [101027544] (len 9) number received: 101027544 attempting to send: [145785087] (len 9) number received: 145785087 attempting to send: [145877792] (len 9) number received: 145877792 attempting to send: [200723770] (len 9) number received: 200723770 attempting to send: [823564440] (len 9) number received: 823564440 attempting to send: [111543816] (len 9) number received: 111543816 attempting to send: [178448449] (len 9) number received: 178448449 attempting to send: [74243042] (len 8) number received: 74243042 attempting to send: [114807987] (len 9) number received: 114807987 attempting to send: [113752250] (len 9) number received: 113752250 attempting to send: [144128232] (len 9) number received: 144128232 attempting to send: [16531729] (len 8) number received: 16531729 attempting to send: [823378840] (len 9) number received: 823378840 attempting to send: [143542612] (len 9) number received: 143542612 Child 2: EOF or ERR PID 69198 exited with status 0x0000 PID 69199 exited with status 0x0000 $ 样式

内箭头将在我预期的中心位置对齐。 但是，以下文本将有一个换行符。

如果我将父容器设为inline-block样式

HTML

inline-block

CSS规则

    <div class="queue-view-entry-line" name="Name">
        <div class="mycompany-document" style="/* display: inline-block; */">
            <div class="arrow-right">
            </div>
        </div>
        <span class="entry-label">File Name</span><span class="entry-value"><a href="/mycompany/servlet/servlet.    FileDownload?file=00P41000007XUEEEA4" target="_blank">Planned Payment Dates 2017</a>
        </span>

    </div>

Answer 1

我建议您尝试使用flexbox。它很快就会成为你最好的朋友！ 我不想与你的HTML搏斗，所以我创建了一个新的例子来展示你如何达到预期的效果。

看看这个小提琴。 https://jsfiddle.net/omucfbzh/

   <div class="box">
      <h2>Documents</h2>
      <div class="others">
        <div class="arrow-container">
          <div> > </div>
        </div>
        <p>Planned Payment Dates 2017</p>
      </div>
    </div>


.box {
  background-color: orange;
  display: flex;
  flex-direction: column;
  padding: 7.5px;
}

.others {
  display: flex;
}

.arrow-container {
  background-color: grey;
  border-radius: 5px;
  height: 50px;
  width: 50px;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}