CSS:垂直居中元素

时间:2014-07-23 21:02:46

标签: css responsive-design

我正在尝试开发我的第一个响应式网站,但我遇到了一些麻烦(当然)。

我需要一个元素(一种菜单)来包含4行元素,每个元素左边有一个图像,右边有一些文本。现在,我遇到的问题是,我似乎无法正确地使元素垂直居中。我尝试了几种似乎适用于很多人的方法,所以我想我会问是否有人知道为什么似乎没有什么对我有用。 这就是图像CSS的样子:

.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}

这是小提琴:http://jsfiddle.net/mampy3000/9JZdZ/1/

感谢任何帮助!

3 个答案:

答案 0 :(得分:0)

您可以通过将此css添加到.tablaBuscador

来执行此操作
position: fixed;
top: 50%;
margin-top:-100px;  /* half of height */

此处有更多信息:How to center a table of the screen (vertically and horizontally)

较新的选项是使用calc()但您可能会遇到浏览器支持问题。

position: fixed;
top:calc(50% - 100px). 

以下是哪些浏览器支持calc():http://caniuse.com/#feat=calc

答案 1 :(得分:0)

由于你的元素是内联块,你可以将一个内联块伪元素100%heightvertical-align:middle注入imgspan DEMO

基本上(+下面的CSS更新):

.tablaBuscadorElementos:before {
    content:'';
    height:100%;
    display:inline-block;
    vertical-align:middle;
}

.tablaBuscadorElementos {
    height:22%;/* instead min-height so value can be used for pseudo or direct child */ 
    border: 1px solid black;
    padding:0px;
    width:100%;
}
.tablaBuscadorElementos > span {
    font-size:20px;
    width:80%;
    vertical-align:middle; /* align to next inline-block element or baseline*/
    border:1px solid black;
    display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
    vertical-align:middle; /* align to next inline-block element or baseline*/
    width: 20px;
    height:20px;

}

.tablaBuscador, .tablaBuscadorElementos{
    display:block;
}
.tablaBuscadorElementos:before {
    content:'';
    height:100%;/* calculated from 22% parent's height */
    display:inline-block;/* layout*/
    vertical-align:middle;/* align to next inline-block element or baseline*/
}

答案 2 :(得分:0)

您的代码需要进行重大调整。你是浮动元素,使用垂直对齐,将它们相对地设置为左,右,顶部和底部设置为0.这些都没有任何意义。这是一个清理过的小提琴:http://jsfiddle.net/jL2Gz/

这是一个经过调整的代码:

* {
    padding: 0;
    margin: 0;
}

body {
    height:100%;
}

.tablaBuscador {
    font-family: "Maven Pro", sans-serif;
    height:200px;
    width:40%;
}

.tablaBuscador > div {
    border: 1px solid black;
    padding: 10px 0;
}

.tablaBuscador > div > span {
    font-size:20px;
    width:80%;
    border:1px solid black;
}

.tablaBuscador > div > img {
    width: 20px;
    height: 20px;
}

.tablaBuscador > div > * {
    display: inline-block;
    vertical-align: middle;
}