我有一个div有两个图像和一个h1.所有这些都需要在div内垂直对齐,彼此相邻.
其中一个图像需要absolute放在div中.
在所有常见浏览器上工作所需的CSS是什么?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Run Code Online (Sandbox Code Playgroud) 我使用twitter bootstrap,我想将verticaly div与图片和右边的文本对齐.
这是代码:
<ol class="row" id="possibilities">
<li class="span6">
<div class="row">
<div class="span3">
<p>some text here</p>
<p>Text Here too</p>
</div>
<figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
</div>
</li>
<li class="span6">
<div class="row">
<figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
<div class="span3">
<p>Some text</p>
<p>Some text here too.</p>
</div>
</div>
</li>
</ol>
Run Code Online (Sandbox Code Playgroud)
我试过这个但不是wortks:
.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}
Run Code Online (Sandbox Code Playgroud)
我也试过这个:
.span6 .row .span3{display: inline-block; vertical-align: middle;}
Run Code Online (Sandbox Code Playgroud)
没有工作.有人有想法吗?提前致谢.
我想在Bootstrap表格单元格中垂直居中一个复选框,这就是我现在所拥有的:
<div>
<table id="mytb" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width: 25%;">A</th>
<th style="width: 40%">B</th>
<th style="width: 35%">C</th>
</tr>
</thead>
<tbody>
<tr>
<td>Blah</td>
<td>Blah More</td>
<td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
</tr>
<tr>
<td>Blah</td>
<td>Blah More</td>
<td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
</tr>
<tr>
<td>Blah</td>
<td>Blah More</td>
<td class="vcenter"><input type="checkbox" id="blahA" value="1"/></td>
</tr>
</tbody>
</table>
</div>
/* CSS */
td.vcenter {
vertical-align: middle;
}
Run Code Online (Sandbox Code Playgroud)
示例:http://jsfiddle.net/dRgt2/2/.很明显,复选框位于单元格的下半部分.
请注意,在上面的小提琴中,我已经尝试过这个问题的解决方案:使用Twitter Bootstrap在表格单元格中垂直居中按钮,但它似乎在我的情况下不起作用.
我正在使用最新的Bootstrap 2.3.2,如果这有所不同.