如何在CSS中居中元素？ [英] How to center a span element in CSS?

问题描述

我有三个< span> 元素，我想一个接一个地水平放置。我还需要中间元素位于页面的中心（水平方向），但 margin：auto; width：100px 无法正常工作，因为它是< span> 。如果我使它< div> ，则会出现换行符。

I have three <span> elements that I want to place horizontally one after the other. I also need the middle element to be at the center of the page (horizontally), but margin:auto; width: 100px is not working since it is a <span>. If I make it <div>, there is a line break.

我该如何解决这个问题？

How do I solve this problem?

推荐答案

三个相同的 span 100px宽度的元素，其中 display：inline-block 嵌套在 div with text-align 设为中心： http：// jsfiddle .net / e9sru /

I would use three identical span elements of 100px width, with display: inline-block nested inside a div with text-align set to center: http://jsfiddle.net/e9sru/

HTML：

HTML:

<div id="container">
    <span class="inner">
        <div class="overflow">Lorem ipsum dolor est mori. I am overflowing but still to the left of number two</div>
    </span>
    <span class="inner">Two</span>
    <span class="inner">Three</span>
</div>

CSS：

CSS:

#container {
    text-align: center;
}

.inner {
    display: inline-block;
    position: relative;
}

.overflow {
    float: right;
}

这篇关于如何在CSS中居中元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！