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>

我需要做的是垂直对齐单词“Text”

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

Answer 1

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

我改变了你的HTML结构，因为你的非常......很有趣......我把它格式化为应该出现：一个包含所有内容的容器 - ＆gt;左右两个区域。从你所拥有的看来，这是一次性修复，你不需要太大的灵活性，所以我提出了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);

Answer 2

如果是我，我会使用这样的表：JSFiddle Link 我加了一个红色边框进行款式测试。

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

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

2 个答案: