1

我目前正在研究元素周期表，尽管我将质量和数字放在我想要的位置，但元素符号不会让步。我尝试了一切：将其从<p>to转换为<span>to <div>， usingdisplay: block和 setting margin: 0 auto， using 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;
}

PS：此表是为移动设备设计的，因此我想避免使用position:absolute或固定边距宽度。

4

3 回答 3

0

这是你想要完成的吗？

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/

于 2013-07-31T22:13:47.720 回答
0

将您的#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 规则并将它们用于表中的每个元素。

于 2013-07-31T22:17:30.647 回答
0

这是为有边距问题的读者提供的解决方案：0 auto not working like I did, or with a similar code. 关键 #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;
}
于 2013-08-02T02:04:05.800 回答