Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 将文本和图像与显示表垂直对齐_Html_Css_Twitter Bootstrap_Vertical Alignment - Fatal编程技术网

Html 将文本和图像与显示表垂直对齐

Html 将文本和图像与显示表垂直对齐,html,css,twitter-bootstrap,vertical-alignment,Html,Css,Twitter Bootstrap,Vertical Alignment,我这里有一个JSFIDLE- 这是一个非常简单的引导布局 它有两行,其中一行包含带有图像的col,另一行包含带有文本的col 文本和图像的高度可能不同 我需要两列的高度相同 如果文本更高,我需要图像颜色相同的高度 如果图像颜色更高,我需要文本颜色的高度相同 然后我需要图像和文本的垂直中心 我认为这将很容易与显示器:表;显示:tabel单元格 有人看到我做错了什么吗 <div class="container"> <div class="

我这里有一个JSFIDLE-

这是一个非常简单的引导布局

它有两行,其中一行包含带有图像的col,另一行包含带有文本的col

文本和图像的高度可能不同

我需要两列的高度相同

如果文本更高,我需要图像颜色相同的高度

如果图像颜色更高,我需要文本颜色的高度相同

然后我需要图像和文本的垂直中心

我认为这将很容易与显示器:表;显示:tabel单元格

有人看到我做错了什么吗

        <div class="container">

            <div class="row">



                <div class="col-sm-3 box text-center">
                    <img src="http://placehold.it/100x50" />
                </div>

                <div class="col-md-9 box">
                    <p>
                        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. 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.
                    </p>    
                </div>


            </div>

            <div class="row">

                <div class="col-sm-3 box text-center">
                    <img src="http://placehold.it/100x150" />
                </div>

                <div class="col-md-9 box">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                    </p> 
                </div>

            </div>  

        </div>  


知识产权是一种权利,是一种精英的权利,是劳动和财富的暂时性权利。但是,在最低限度上,我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡。这是一个不可分割的地方。除偶尔因疏忽而死亡外,不得因疏忽而导致动物死亡。

知识产权是一种权利,是一种精英的权利,是劳动和财富的暂时性权利。


浮动会干扰垂直对齐。我修改了您的,给您一个工作示例。

移动
垂直对齐:中间到表格单元格:特别是对于使用Twitter引导的垂直对齐,您可以参考:。这似乎在750px-615px之间工作,但高于750px时布局会变差。这是因为Twitter引导将
float:left
应用于所有列。您可以通过指定列
float:none
:来覆盖它:但是请注意,CSS表有自己的缺点/限制。你应该小心使用它们。如果你没有意识到这一点,你可能会遇到麻烦。我不喜欢使用css表,因为它们会导致问题,但是你能建议另一种方法吗?