相关疑难解决方法(0)

如何垂直对齐div中的元素?

我有一个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)

html css vertical-alignment

722
推荐指数
15
解决办法
126万
查看次数

vertical-align:中间有Bootstrap 2

我使用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)

没有工作.有人有想法吗?提前致谢.

html css html5 twitter-bootstrap-2

31
推荐指数
1
解决办法
10万
查看次数

Bootstrap表格单元格中的垂直中心复选框

我想在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,如果这有所不同.

html css html-table twitter-bootstrap

1
推荐指数
1
解决办法
3万
查看次数