1

これが非常に簡単な手順であることは理解していますが、このページのデザインを完成させようとするたびに答えを探していますが、ここや Google で見つけた解決策はどれもうまくいきませんでした。

また、要素を強制的に中央に配置することが理想的ではないことも理解しています。特に、最近インターネットにアクセスするさまざまなデバイスが非常に多い場合は特にそうですが、他の問題に集中できるように、これをやりたいだけです。

コードは次のとおりです。

    <!DOCTYPE html>

<html>

<head>

<title>Como chegar</title>

<style>

#container {

    width: 800px;
    height: 600px;
    margin: 100px auto;

}

#content {

    width: 800px;
    height: 500px;
    background-color: white;

}

.strips {

    width: 800px;
    height: 50px;
    background-image: url(spritepimentarosa.png);
    background-repeat: no-repeat;
    float: left;

}

.navBar {

    width: 250px;
    height: 50px;
    background-image: url(spritepimentarosa.png);
    background-repeat: no-repeat;
    float: left;

}

.nb1 {

    background-position: 0px -450px;
    margin-left: 25px;

}

.nb2 {

    background-position: -250px -450px;

}

.nb3 {

    background-position: -500px -500px;
    margin-right: 25px;

}

.nb1:hover {

    background-position: 0px -500px;
    margin-left: 25px;

}

.nb2:hover {

    background-position: -250px -500px;

}

.nb3:hover {

    background-position: -500px -450px;
    margin-right: 25px;

}

.logo {

    background-position: 0px -200px;

}

.footer {

    background-position: 0px -400px;

}

</style>

</head>

<body bgcolor="#D63B77">

    <div id="container"><!-- beginning of container -->

    <div class="navBar nb1"></div>
    <div class="navBar nb2"></div>
    <div class="navBar nb3"></div>

    <div id="content"><!-- beginning of content -->


        <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ie/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&amp;aq=0&amp;oq=980,+avenida+sao+camilo&amp;sll=-23.583184,-46.836844&amp;sspn=92.879748,186.152344&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&amp;ll=-23.583025,-46.83712&amp;spn=0.037758,0.054932&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://maps.google.ie/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&amp;aq=0&amp;oq=980,+avenida+sao+camilo&amp;sll=-23.583184,-46.836844&amp;sspn=92.879748,186.152344&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&amp;ll=-23.583025,-46.83712&amp;spn=0.037758,0.054932&amp;z=14&amp;iwloc=A" style="color:#D63B77;text-align:center;font-size:180%">Ver mapa ampliado</a></small>


    </div><!-- end of content -->

    <div class="strips logo"></div>

    <div class="strips footer"></div>

    </div><!-- end of container -->

</body>

</html>

誰かがこれで私を助けることができれば、それは大歓迎です。

ありがとうございました。

4

3 に答える 3

4

通常、次を追加するだけです。

#content {
  text-align: center;
}

もう1つのトリックは、divの幅を設定してから、divを自動マージンすることです。

#content {
  width: 800px;
  margin-left: auto;
  margin-right: auto;
}
于 2013-02-19T14:03:03.723 に答える
0

divで使用できます

  margin-left: auto ;
  margin-right: auto ;
于 2013-02-19T13:59:51.050 に答える
0

中心にしますか:

  • ページ
  • ページの内容
  • Google マップ (iframe)

ページ

ページを中央に配置するには、#content ID で div を囲む div であるラッパーを使用する必要があります。

.wrapper or #wrapper (depends if you want to use ID or Class)
{
  margin: 0 auto;
}

ページの内容

#context にマージンを適用するだけです。

#contet
{
  margin: 0 auto;
}

マージン

CSS を介して iframe タグにマージンを適用するだけです。

iframe
{
  margin: 0 auto;
}

** 注 ** これを機能させるには、要素に幅を割り当てる必要があることに注意してください。width: 100%; は使用できません。それがうまくいくことを期待していますが、あなたはすでにこれを知っていると思います.

于 2013-09-02T04:52:36.970 に答える