1

CSS初心者なのでわかりやすく教えてください。各 div のコンテンツを中央に配置して、互いに同じサイズの 3 つの div を並べて配置します。私が持っているのは、画像が回転する中央の div で、左右の div にはそれぞれ 3 つのリンクが含まれています。各divの幅を設定することから、左右を左右に浮かせて中央を中央に配置することまで、すべてを試しました。このサイトでこのような質問をいくつか見ましたが、答えがわかりません。それが役立つ場合は、div に次の名前を使用しています。

左上ナビゲーション

トップセンター

トップライトナビゲーション

コード：

<div id="top">
  <div id="topleftnav">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="services.html">Services</a></li>
    </ul>
  </div>
  <div id="centerright">
   <div id="topcenter">
       <layer id="placeholderlayer"></layer><div id="placeholderdiv"><a href="link.htm"><img alt="image2 (9K)" src="images/image2.jpg" border="0"></a></div>
   </div>
   <div id="toprightnav">
     <ul>
       <li><a href="resources.html">Resources</a></li>
       <li><a href="contact.html">Contact</a></li>
       <li><a href="events.html">Events</a></li>
     </ul>
   </div>
 </div>
</div>
4

5 に答える 5

1

CSS

#1 { width: 33%; display: inline text-align: center; '#2 { 幅: 33%; 表示: インライン テキスト配置: 中央; '#3 { width: 33%; display: inline text-align: center;

于 2013-09-28T18:58:08.730 に答える
1 
<style>
.yourDivStyle {
float: left;
width: 50px;
height: 50px;
border-style:solid;
border-width:5px;

}
.insideDiv {
 text-align: center;   
}

</style>

<div class="yourDivStyle"><p class="insideDiv">div 1</p></div>
<div class="yourDivStyle"><p class="insideDiv">div 2</p></div>
<div class="yourDivStyle"><p class="insideDiv">div 2</p></div>

http://jsfiddle.net/Hg6DK/

于 2013-09-28T19:02:44.950 に答える
0

This should be the solution. adjust the width values to your needs.

<html>

<head>
<style type="text/css">
    #container 
    {
        width:600px;
    }
    #centernav 
    {
        width:200px;
        float:left;
    }
    #topleftnav 
    {
        width:200px;
        float:left;
    }
    #toprightnav 
    {
        width:200px;
        float:left;
    }
    .center 
    {
        width:150px;
        margin:auto;
    }
</style>
</head>
<body>
    <div id="container">

        <div id="topleftnav">
            <div class="center">
                LEFTNAV
            </div>
        </div>

        <div id="centernav">
            <d iv class="center">
                CENTER
            </div>

        <div id="toprightnav">
            <div class="center">
                RIGHTNAV
            </div>
        </div>

    </div>
</body>

</html>
于 2013-09-28T19:06:37.027 に答える
0

次のようなことを試してください：

#top div{
    display:inline-block;
    width:33%;
    text-align:center;
}
于 2013-09-28T19:18:48.543 に答える
0

これはどう：

<HTML>
    <BODY>
        <DIV id="container" style="margin-left: auto; margin-right: auto;">
            <DIV id="topleftnav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the left
            </DIV>
            <DIV id="centerNav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the middle
            </DIV>
            <DIV id="rightNav" style="float: left; margin-left: auto; margin-right: auto; text-align: center; width: 200px;">
                Hello from the right
            </DIV>
        </DIV>
    </BODY>
</HTML>
于 2013-09-28T19:02:46.917 に答える