0

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% ではないことです。

4

2 に答える 2

1

私だったら、次のようなテーブルを使用します:スタイル テスト用に赤い枠線で追加したJSFiddle リンク。 

<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>
于 2013-07-21T05:01:05.113 に答える