Question

我有一个包含span的div，我希望span垂直和水平对齐div的中心。

我在margin:auto和span vertical-align上尝试div，但它无效

编辑：我的div和我的跨度没有固定的高度，这取决于内容，我已经把它固定在小提琴上只是为了告诉你

Answer 1

将此添加到div CSS：

display:table-cell; text-align:center

工作小提琴就在这里：http://jsfiddle.net/sdoking/DCT85/

<强> CSS：

#myDiv {
border:1px solid black;
height:50px;
width:200px;
vertical-align:middle;
display:table-cell; 
text-align:center
}

#mySpan {
width:100%;
border:thin blue solid
}

边界是为了清晰起见：）

Answer 2

垂直对齐是一项棘手的事情，我不知道是否有一种经过验证的方法。过去几年中最可靠的技术是使用CSS表格布局。这种方法的唯一缺点是它可能无法在过时的浏览器上运行。不过，根据我的经验，这可能是最好的整体解决方案。请参阅下面的示例：

<style type="text/css">
    #container {    
        display:table;    
        border-collapse:collapse;  
        height:200px;  
        width:100%;
        border:1px solid #000;
    }         
    #layout {    
        display:table-row;   
    }           
    #content {    
        display:table-cell;  
        text-align:center; 
        vertical-align:middle;    
    }           
</style>

<div id="container">    
    <div id="layout">    
        <div id="content"> 
            Hello world! 
        </div>     
    </div>   
</div>

这是一个jsFiddle：http://jsfiddle.net/aGKfd/2/

还有另一种技术，但它并不像上述技术那样万无一失。它涉及两个容器，外部容器的位置设置为相对，内部设置为绝对。在内部容器上使用绝对定位可以接近，但需要进行一些调整以使其恰到好处：

<style type="text/css">
    #vertical{ 
        position:absolute; 
        top:50%;     
        left:0; 
        width:100%; 
        text-align:center;
    } 
    #container {
        position:relative;
        height:200px;
        border:1px solid #000;
    }
</style>         
<div id="container"> 
    <div id="vertical"> 
        Hello world! 
    </div>               
</div>

这是一个jsFiddle：http://jsfiddle.net/6SWPe/

Answer 3

使用line-height = height： http://jsfiddle.net/RhNc2/8/

Answer 4

这是

#myDiv{
    border:1px solid black;
    height:50px;
    width:200px;
}

#mySpan{
    display:block;
    text-align:center;
    line-height:50px;
}

和jsFiddle：http://jsfiddle.net/Simo990/RhNc2/9/

编辑，因为你的div和跨度高度取决于内容，我的解决方案将无法工作，因为它需要固定的高度和只有一行文本。只需查找position:absolute的解决方案。

Answer 5

您也可以将这些样式应用于包含<div>的内容。 line-height解决方案假设您只需要将一行文本居中。

#myDiv{
    border:1px solid black;
    height:50px;
    width:200px;
    text-align:center;
    line-height:50px;
}

垂直居中在div中的跨度

5 个答案: