Question

这些是我的CSS代码，然后是html代码。我要做的是将边框居中放置在边框内，并在缩小窗口大小时防止边框被其他边框推入。
这是使它们的位置固定并在任何窗口尺寸下都保持其位置。我已经尝试了所有我知道的将边框居中的内容，并且页边空白将起作用，但是页边空白需要取决于计算机屏幕的尺寸，这意味着，如果我在较小的计算机屏幕上打开我的网站，则不会居中。因此，我希望图像保持居中并自动适合任何尺寸的屏幕和窗口。

看起来像这样，即使我缩小窗口的尺寸以及其他任何较小或较大尺寸的计算机屏幕，它也会保持不变

谢谢！！

#bodybox2{
          border-top:1px solid black;
          width:90%;
          margin-top:5%;
          padding:5%;
          background-color:grey;              
          overflow:hidden;            
         }

.imagebox{
          border:10px solid black;
          text-align:center;
          width:100%;         
          margin-left:auto;
          margin-right:auto;
          overflow:hidden;                       
          } 

.image{
       float:left;        
       text-align:center;
       font-size:2em;
       border:1px solid black;
      }

.imageclear{
           clear:left;
           float:left;              
           text-align:center;
           font-size:2em;
           border:1px solid black;              
         }     





 <div id='bodybox2'>

   <div class="imagebox">

   <span class="image"><img src="women.jpg" width="300" height="400"><br<br>Pretty Girl</span>
   <span class="image"><img src="womenwithumbrella.jpg" width="300" height="400"><br><br>Pretty Girl</span> 
   <span class="image"><img src="women1.png"  width="300" height="400"><br><br>Pretty Girl</span>

   </div>

    <div class="imagebox">

  <span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
  <span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
  <span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>

    </div>

   <div class="imagebox">

  <span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
  <span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
  <span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>

    </div>

 </div>

Answer 1

显然，Paulie_D不知道如何单击链接。所以你去了：

<!DOCTYPE html>
    <html>
        <head>
        <title>Page Title</title>
            <style>
            #bodybox2{
                      border-top:1px solid black;
                      width:90%;
                      margin-top:5%;
                      padding:5%;
                      background-color:grey;              
                      overflow:hidden;            
                     }

            .imagebox{
                      border:10px solid black;
                      text-align:center;
                      width:100%;         
                      margin-left:auto;
                      margin-right:auto;
                      overflow:hidden;  
                      display: flex;
                      justify-content: center;
                      } 

            .image{
                   float:left;        
                   text-align:center;
                   font-size:2em;
                   border:1px solid black;
                  }

            .imageclear{
                       clear:left;
                       float:left;              
                       text-align:center;
                       font-size:2em;
                       border:1px solid black;              
                     }  
            </style>
        </head>
    <body>

     <div id='bodybox2'>

       <div class="imagebox">

       <span class="image"><img src="women.jpg" width="300" height="400"><br<br>Pretty Girl</span>
       <span class="image"><img src="womenwithumbrella.jpg" width="300" height="400"><br><br>Pretty Girl</span> 
       <span class="image"><img src="women1.png"  width="300" height="400"><br><br>Pretty Girl</span>

       </div>

        <div class="imagebox">

      <span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
      <span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
      <span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>

        </div>

       <div class="imagebox">

      <span class="imageclear"><img src="shoe.jpg" width="300" height="400"><br><br>Pretty Girl</span>
      <span class="image"><img src="women2.jpg" width="300" height="400"><br><br>Pretty Girl</span>
      <span class="image"><img src="menshirt.jpg" width="300" height="400"><br><br>Pretty Girl</span>

        </div>

     </div>

    </body>
    </html>

如果希望它们居中，请检查justify-center: space-between。

HTML Border浮动中心位置修复

1 个答案: