Question

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

我需要一个元素（一种菜单）来包含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/

感谢任何帮助！

Answer 1

您可以通过将此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

Answer 2

由于你的元素是内联块，你可以将一个内联块伪元素100％height和vertical-align:middle注入img和span： 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*/ }

Answer 3

您的代码需要进行重大调整。你是浮动元素，使用垂直对齐，将它们相对地设置为左，右，顶部和底部设置为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;
}

CSS：垂直居中元素

3 个答案: