Question

我目前正在制作一张周期表，虽然我得到的质量和数字放在我想要的位置，但元素符号不会让步。我尝试了所有内容：使用<p>将其从<span>转换为<div>再转换为display: block并使用margin: 0 auto设置text-align: center，但仍然赢了没事。

这是HTML：

        <div id = "a1" class="element alkalimetal">
            <p>
                <span id = "anumber">118</span>
                <span id = "amass">9.008</span>
            </p>
            <br>
            <div id = "symbol">H</div>
        </div>
        <div id = "a2" class = "element noblegas">

        </div>

这是CSS：

#anumber{
    font-family:Arvo;
    top: 0.1em;
    position:relative;
    vertical-align:super;
    font-size:1.5em;
    float:left;
    padding-left:0.2em;
}

#symbol{
    width: 5em;
    font-family: AvenirCondensed;
    font-size: 5em;
    text-align:center;
    margin: 0 auto;
}

#amass{
    font-family:AvenirNext;
    top: 0.1em;
    position:relative;
    vertical-align:super;
    font-size:1.5em;
    float:right;
    padding-right:0.2em
}
.element{
    border: 1px solid black;
    border-radius: 3px;
    height: 8em;
    width: 8em;
    float: left;
}

P.S。：此表是专为移动设备设计的，因此我希望避免使用position:absolute或固定边距宽度。

Answer 1

这是你想要完成的吗？

http://jsfiddle.net/doitlikejustin/jAE7y/

#symbol{
    width: 5em;
    font-family: AvenirCondensed;
    font-size: 5em;
    text-align:center;
    margin: 0 auto;
    display:table-cell;
    vertical-align:center;
}

这是一个更新的小提琴，包含多个元素http://jsfiddle.net/doitlikejustin/jAE7y/1/

更新了对齐和固定类http://jsfiddle.net/doitlikejustin/jAE7y/3/

Answer 2

将您的#symbol规则更改为以下内容：

#symbol{
    /* width: 5em; REMOVE THIS */
    font-family: AvenirCondensed;
    font-size: 5em;
    text-align:center;
    /* margin: 0 auto; REMOVE THIS */
}

你的宽度导致符号溢出它所坐的div，打破了流动。之后不再需要margin: 0 auto。

另外，作为旁注，您应该使用更多的类而不是ID。 ID适用于每页仅使用一次的元素。您可以轻松地将#symbol设置为班级.symbol以及.amass和anumber。这将允许您设置一次CSS规则并将其用于表中的每个元素。

Answer 3

这是针对边缘有问题的读者的解决方案：0自动不像我那样工作，或者使用类似的代码。关键＃1是将内部div设置为float：none，因为它从.element继承了此属性。关键＃2是将内部div的宽度设置为width：inherit，以便text-align：center可以正确定位文本。附加的代码段

.symbol{ max-height: 8em;
    width: inherit;
    display: inline-block;
    font-family: AvenirCondensed;
    font-size: 4.5em;
    float: none;
    text-align: center;
}

使用HTML / CSS将元素置于DIV内部

3 个答案: