居中在列表项中的div

我有一个html页面，其中我在列表项中有一个div，并试图将div居中放在列表项中（div的宽度小于列表项的宽度）。我的CSS看起来像居中在列表项中的div

ul.my { 
    width: 100px; 
    padding: 0; 
} 

li.my { 
    list-style: none; 
} 

div.content { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
}

和HTML有一个片段，看起来像

<li class="my"><div class="content">stuff</div></li>

但DIV是左对齐。我该如何正确对中它？

来源

2012-11-01 Jeff Storey

您可以水平中心的div与

div.content { 
    width: 100%; 
    text-align: center; 
}

或中心在div本身的内容：

.my li { 
    text-align: center; 
} 
div.content { 
    display: inline-block; 
}

对于垂直居中，你必须包裹display: table-cell元素a display:table one，like

.my li { 
    height: 200px; 
    display: table; 
} 
div.content { 
    display: table-cell; 
    vertical-align: middle; 
}

来源

2012-11-01 23:02:24 phihag

对不起，这是100px，而不是100x（在问题中更新） –

@JeffStorey更新了一个具体的例子。是的，李（或div的包装）必须有'display：table'。 – phihag

显示表/表格单元做到了，谢谢。 –

是你的CSS和HTML真的有关？

您.my类是li元素，让你的造型看起来应该像：

li.my { 
    // li styles 
}

，除非你有一个较大的容器周围的ul然后.my ul在这里并不适用两种。

除了这些变化，既可以使用li { text-align: center; }或div { margin: auto; }

UPDATE（垂直居中）：

对于垂直居中，如果你的文字都在同一行，那么请尝试设置line-height大小相同作为你的font-size，如：

div.content { 
    font-size: 14px; 
    line-height: 14px; 
}

如果它包装到2行或更多行，这有点棘手。 Try this。

来源

2012-11-01 22:59:00 Scrimothy

哎呀，这里有错字。这是固定的。有没有办法在div中垂直居中放置内容？ –

有多行，但@phihag提出的解决方案工作。 –

居中在列表项中的div

回答

相关问题