我正在尝试开发我的第一个响应式网站,但我遇到了一些麻烦(当然)。
我需要一个元素(一种菜单)来包含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/
感谢任何帮助!
答案 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%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*/
}
答案 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;
}