1

私は現在、周期表に取り組んでいます。質量と数を希望の場所に配置しましたが、元素記号が動かないだけです。私はすべてを試し<p>ました.<span><div>display: blockmargin: 0 autotext-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

マージンに問題がある読者のための解決策は次のとおりです: 0 auto が私のように機能しない、または同様のコードで。キー #1 は、.element からこのプロパティを継承したため、内側の div を float:none に設定することでした。キー 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 に答える
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;
}

これは、複数の要素を持つ更新された Fiddle です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 は、ページごとに 1 回だけ使用される要素を対象としています。やだけでなく#symbol、クラスにも簡単に設定できます。これにより、CSS ルールを一度設定して、テーブル内の各要素に使用できます。.symbol.amassanumber

于 2013-07-31T22:17:30.647 に答える