垂直对齐不起作用

垂直对齐锚定标签内部的图像是可能的吗？垂直对齐不起作用

我在DIV中使用了两个锚标签，每个都应该垂直对齐中心。在一个我正在另一个文本中使用图像？

PS：没有行高

来源

2009-12-14 Joemon

你不能垂直对齐div标签内，但你可以用一个表格单元格。如果可以修复图像及其容器的高度，则可以解决此问题。

来源

2009-12-14 11:38:31 Rimian

垂直对齐不像您在div中所想的那样工作，因为它仅适用于表格单元格。

还有的CSS“黑客”来获取工作，如this one或this one

来源

2009-12-14 11:45:09 marcgg

+1很好的参考。 – Saar 2009-12-14 11:47:21

这个答案是OBSOLETE ...它适用于内嵌对象和内联块，但它需要在对象本身上设置，而不是在父级上。然后，它不会总是工作... – vsync 2012-12-01 05:01:36

请参阅以下网址，就可以拥有你所需要的答案，以及给你的垂直对齐的全面了解数字属性。

http://css-tricks.com/what-is-vertical-align/

来源

2009-12-14 16:49:31

的解决方案是非常简单的使用CSS。

下面是一个例子：

#anySection { 
    background: white url(../images/anyImage.jpg) no-repeat center; 
    height: 500px; 
    width: 500px 
}

标记：

<div id="anySection"></div>

你会得到你的形象里为中心的500×500像素部分。

来源

2011-11-15 23:21:09

试试这个：

div{ 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2012-07-10 16:46:28

因为任何人的指出了这一点，你会得到取决于DOCTYPE不同的行为。

（在我的情况下，过渡的doctype不是垂直对齐内联元素没有兄弟文本节点，而HTML5一样。）

来源

2013-01-08 19:03:54

我有同样的问题。这个工作对我来说：

<style type="text/css"> 
    div.parent { 
     position: relative; 
    } 

    /*vertical middle and horizontal center align*/ 
    img.child { 
     bottom: 0; 
     left: 0; 
     margin: auto; 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 
    </style> 

    <div class="parent"> 
     <img class="child"> 
    </div>

来源

2013-01-26 19:52:34 algreat

最简单的解决方案，适合我。尽管没有反应。 – christoshrousis 2014-02-05 05:13:36

这似乎为我工作：

/* Internet Explorer 10 */ 
    display:-ms-flexbox; 
    -ms-flex-pack:center; 
    -ms-flex-align:center; 

/* Firefox */ 
display:-moz-box; 
-moz-box-pack:center; 
-moz-box-align:center; 

/* Safari, Opera, and Chrome */ 
display:-webkit-box; 
-webkit-box-pack:center; 
-webkit-box-align:center; 

/* W3C */ 
display:box; 
box-pack:center; 
box-align:center;

来源

2013-09-23 18:05:37

<div style="border:1px solid #000;height:200px;position: relative;"> 
    <div style="position: absolute;top: 50%;left:50%;"> 
    hello mahesh // Div Body part 
    </div> 
</div>

Fiddle demo

试试这个。

来源

2014-08-15 14:14:46

垂直对齐不起作用

回答

相关问题