我怎样才能使元素居中[重复]

Posted 2023-03-05

【中文标题】我怎样才能使元素居中[重复]

【英文标题】：How can I center the elements [duplicate]

【发布时间】：2012-09-19 03:49:31

【问题描述】：

可能重复：How do you easily horizontally center a <div> using CSS?

http://jsfiddle.net/rehan008/s5eEf/ 请参考这里。

我想让所有快捷方式居中对齐，但最后一行应向左对齐。 如果有任何想法，请分享。

【问题讨论】：

你应该在这里发布你的代码。

“居中对齐”是什么意思？带有容器的DIV？还是快捷方式中的文字？

我认为最接近的是将text-align:justify 添加到.shortcutContainer 。这将甚至整行并将最后一行项目向左移动。

有什么理由必须使用单个单元格table 来包装内容？

我无法准确说出您想要什么，但这可能会有所帮助：***.com/questions/10548417/…。

【参考方案1】：

在您的 CSS 中添加此样式并检查。希望对你有用

td 文本对齐：居中；

【参考方案2】：

要使每个 div 居中对齐（并单独在一行上），这就是我解释您的要求的方式，您可以将 .shortcut css 样式更改为：

.shortcut
    border: 1px solid red;
    height:65px;
    width:45px;
    display:block;
    margin:5px auto;

要使最后一个快捷方式左对齐，只需给它另一种样式：

   .lastShortcut
        border: 1px solid red;
        height:65px;
        width:45px;
        display:block;
        margin:5px 0px;
    

【讨论】：

如果您看到最后一行快捷方式没有单独的行

所以放入另一个 div 来包装你想要的元素作为最后一行。或者在最后一个 div 中添加一个 ID 或第二个类名。或者使用 Terric 建议的选择器 [.shortcut:last-child > div]。这些解决方案中的任何一个都允许您为最后一个快捷方式指定不同的样式。

你没明白我的意思。

所有元素都在同一个div中，并根据可用空间向左浮动，元素将排列它们

【参考方案3】：

将.shortcut 的所有div 子级设置为具有居中的边距，不包括最后一个。

.shortcut > div 
    margin: 0 auto;


.shortcut:last-child > div 
    margin: 0;

Update fiddle