html - Wrapper布局和div问题

Question

图片

我尝试使用以下 CSS 和 HTML。当浏览器全宽时它看起来很好，当浏览器调整大小时它看起来很乱。我希望元素在那里，并且在调整浏览器大小时必须出现水平滚动。 Web 编程的新手。用于定位中心列的 Text-align:center 不起作用，因为每次在左侧或右侧添加新文本时，它都会重新定位，并且 ROW1(text) 和 ROW2(Button) 中的中心列元素不会出现同一条线。也就是说，文本看起来有点靠右，而按钮有点靠左。文本对齐在这里不起作用。

CSS:

  @charset "utf-8";
  /* CSS Document */

  body
  {
       background-color:#000;
  }
  .wrapper
  {
      width:70%;
      margin:0 auto;
      padding:2px;
      background-color:#fff;
   }
   .second_row
   {
      padding:2px;
      margin-top:10px;
   }

   .center_container
   {
      width:30%;
      margin:0 auto;    
   }
   .left_container
   {
      width:33%;
      float:left;
   }
   .right_container
   {
      width:33%;
      float:right;
   }
   .topelements 
   {
      margin-top:0px;
      color:#777;
      padding:2px;
   }
   .topelements a:link
   {
      color:#29a3cc;
   }
   .topelements a:active a:hover
   {
      color:#29a3cc;    
   }
   .logo
   {

      overflow:hidden;
   }

HTML代码:

  <div class="wrapper"> 
    <span class="topelements float_left" >Mail us: <a href="#">admin@admin.com</a></span>
    <span class="topelements float_right">Left links <a href="#">My xyz</a></span>
    <span class="topelements center_container">Welcome to xyz ! <a href="#">Sign in</a> or <a href="#">Signup</a>.</span>
   </div>
     <div class="wrapper second_row">
       <span class="left_container">Srini</span>
       <span class="right_container">Vas</span>
           <form class="center_container">
              <input type="text" placeholder="Goooooooooooo!" />
              <input type="submit" value="Search" />
           </form>
     </div>
     <div class="wrapper">

Answer 1

如果您想将对象居中对齐，有几种不同的方法。首先，您现在不需要 text-align:center;。还有 object-position:center; 基本上做同样的事情，但有一个对象。这种方式不是最好的方式，但您可以在任一侧添加一定比例的 padding，但不推荐这样做。最后，还有 alignment-adjust:central;。这可能不适合您的情况，但只需尝试所有这些，看看它们是否有效。祝你好运!