对齐针对父div垂直，水平中心内的div不换行以下跨度文本元素

Question

如果我没有做父容器是inline-block风格

内箭头会在中锋位置上对准其是我的预期。 但是，下面的文字将会出现换行符。

如果我让父容器是inline-block风格

HTML

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

CSS规则

div{ 
    .mycompany-document{ 
    background: #F7F7F7; 
    border: 1px solid #AAAAAA; 
    left: 64px; 
    top: 64px; 
    width: 32px; 
    height: 32px; 
    vertical-align: middle; 
    border-radius: 5px; 
    letter-spacing: 1px; 
    text-align: center; 
    display: table-cell; 

    .arrow-right{ 
     margin: auto; 
     vertical-align: middle; 
     display:inline-block; 
     width: 0.4em; 
     height: 0.4em; 
     border-right: 0.2em solid black; 
     border-top: 0.2em solid black; 
     transform: rotate(45deg); 
    } 

    } 

} 

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