我冒昧地将 HTML 中的一些 CSS 移到了 CSS 区域中。在您的网页上，您可能应该将其放在<style> 标签中，而不是硬编码到每个元素中以使其可读。
我更改了您的 HTML 结构，因为您的 HTML 结构非常...有趣...我将其格式化为应该出现的样子：一个包含所有内容的容器 -> 左右两个区域。从您的情况来看，这似乎是一次性修复，您不需要很大的灵活性，所以我想出了this hard coded solution。它涉及floating 正确的内容和绝对定位左侧的内容以使其居中。如果您的内容不仅仅是“文本”，则需要调整该类的 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);