css - 如何在另一个 div 中垂直对齐 div 中的文本？

Question

我正在尝试垂直对齐 div 中的文本。我已经为我当前的问题创建了一个 fiddle 。

您可以在此链接上查看我的代码 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 结构，因为您的非常……有趣……我将其格式化为它应该出现的样子:一个容器包含所有内容 -> 左右两个区域。从你的情况来看，这似乎是一次性修复，你不需要太多的灵 active 所以我想出了 this hard coded solution .涉及float调整正确的内容并绝对定位左侧内容以使其居中。如果您的内容不仅仅是“文本”，您将需要调整 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);