如何在div中垂直对齐文本而在另一个div内？

Question

我想垂直对齐div内的文本。我创造了一个当前问题的小提琴。

您可以查看这个链接 http://jsfiddle.net/NSvGc/

在这里，在我当前的代码在我的代码

<div style="display: block; width: 500px; border: 1px dashed #C0C0C0; margin: 0 auto; padding: 5px;"> 
<div style="display: inline-block; width: 300px; height: 100%; vertical-align: middle;" 
    ><b>Text</b> 
    </div> 
    <div style="display: inline-block;"> 
     <div style="display:block; width: 180px;" > 
      <input type="text" value="2013-01-01 12:45 PM" name="triggerOn[]" id="triggerOn_'+ v.call_code_id +'" readonly="readonly" style="width: 175px;"></div> 
     <div style="display:block; margin: 5px;"><input type="checkbox" id="isAppointment" name="isAppointment" value="1" /> Make an appointment.</div> 
</div> 
</div> 

什么我需要做的是垂直对齐的词“文本”

的这里的问题是内部div不是100％的高度。

Answer 1

我冒昧地将HTML中的一些CSS移动到CSS区域。在您的网页上，您应该将其放在<style>标记中，而不是硬编码到每个元素中以使其可读。

我改变了你的HTML结构，因为你的非常......有趣......我把它格式化成它应该出现的样子：一个容器包含所有内容 - >左右两个区域。从你看来，这似乎是一次性修复，你不会需要非常灵活，所以我想出了this hard coded solution。它涉及到正确的内容并绝对定位左侧内容以使其居中。如果您拥有的不仅仅是“文本”更大的内容，你将需要为类调整top值\

这里是我的编辑HTML

<div class='container'> 
<b class='text'>Text</b> 
    <div class='appointment'> 
     <input type="text" value="2013-01-01 12:45 PM" name="triggerOn[]" id="triggerOn_'+ v.call_code_id +'" readonly="readonly" style="width: 175px;"> 
     </br> 
     <input type="checkbox" id="isAppointment" name="isAppointment" value="1" /> 
     <div id='spacing'></div>Make an appointment.</div> 
</div> 

和我的编辑CSS（单独的，而不是在标签）

.container { 
    display: block; 
    width: 500px; 
    height:70px; 
    border: 1px dashed #C0C0C0; 
    margin: 0 auto; 
    padding: 5px; 
} 
.appointment { 
    display: inline-block; 
    float:right; 
} 
.text { 
    position:absolute; 
    top:35px; 
    margin-left:15px; 
} 
#spacing { 
    width:10px; 
    height:2px; 
    display:inline-block; 
} 

编辑：

既然你想要的左侧区域完全垂直居中，我改变了HTML的结构，并改变了CSS以适应它，但如果没有一些JavaScript的帮助，它是真的不可能的。我使用jQuery将每个元素完美对齐。另一个解决方案是使用Flexbox，但我选择了jQuery路由。 Here is the new dynamic solution

这里是我的更新HTML

<div class="container"> 
     <div class="bubble-left"> 
      <b class='text'>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</b> 
     </div> 
    <div class='bubble-right'> 
     <div class='appointment'> 
     <input type="text" value="2013-01-01 12:45 PM" name="triggerOn[]" id="triggerOn_'+ v.call_code_id +'" readonly="readonly" style="width: 175px;"></br> 
     <input type="checkbox" id="isAppointment" name="isAppointment" value="1" /><div id='spacing'></div>Make an appointment.</div> 
    </div> 
</div> 

CSS

.container { 
    width: 500px; 
    height: auto; 
    position: relative; 
    border: 1px dashed #C0C0C0; 
    margin: 0 auto; 
    padding: 5px; 
} 
.bubble-left { 
    position: absolute; 
    left: 5px; 
    top: 0; 
    width: 300px; 
    height: 100%; 
    display: table; 
} 

.bubble-left b { 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
} 

.bubble-right { 
    position: absolute; 
    padding-top:5px; 
    right: 50px; 
    top: 40%; 
    width: 135px; 
    height: 30px; 
    display: table; 
} 
#spacing { 
    width:10px; 
    height:2px; 
    display:inline-block; 
} 

，并添加JavaScript的

var biggestHeight = "0"; 
// Loop through elements children to find & set the biggest height 
$(".container *").each(function(){ 
// If this elements height is bigger than the biggestHeight 
if ($(this).height() > biggestHeight) { 
    // Set the biggestHeight to this Height 
    biggestHeight = $(this).height(); 
} 
}); 

// Set the container height 
$(".container").height(biggestHeight); 

//position right content verically 
$('.bubble-right').css('top', $('.bubble-right').parent().height()/2 - $('.bubble-right').height()/2); 

Answer 2

如果是我，我会用一个表像这样：JSFiddle Link
我加入了红色边框r进行风格测试。

<table style="text-align: left; width: 500px; height: 100px; border: 1px dashed black; padding: 10px;" border="0" 
cellpadding="0" cellspacing="0"> 
    <tbody> 
    <tr> 
     <td style="vertical-align: bottom; font-size: 20px;">Text!</td> 
     <td style="vertical-align: top; width: 150px;"> 

      <div style="display: inline-block;"> 

     <div style="display:block; width: 180px;" > 

      <input type="text" value="2013-01-01 12:45 PM" name="triggerOn[]" id="triggerOn_'+ v.call_code_id +'" readonly="readonly" style="width: 175px;"> 
      </div> 

      <div style="display:block; margin: 5px;"> 
       <input type="checkbox" id="isAppointment" name="isAppointment" value="1" /> Make an appointment. 
      </div> 

     </div></div> 

     </td> 
    </tr> 
    </tbody> 
</table>