Question

我遇到了水平中心潜水的问题。我有一个菜单栏，里面有几次潜水。菜单栏位于页面的中心，但这些潜水内侧粘在左侧，我尝试填充，但后面的菜单栏越来越大。我把代码放在下面，也许有人会知道怎么做

.menubar1{
   background: #ffffff00;
   width:95%;
   max-width:95%;
   margin-right: auto;
   height: 70px;
   margin-left: auto;
   margin-top: 5%;
   border-top-right-radius: 50px;
   border-top-left-radius: 50px;
   position: static;
   margin-bottom: -18px;    
}
.menubar1>div{
   width: 17%; 
   display: inline-block;
   vertical-align: top;
   height: 45%;
   zoom: 1;
   background-position: center;
   text-align: center;
   font-size: 23px;
   padding-top: 10px;
   font-family: cursive;        
   font-weight: 600;
   margin-top: 5px;
}
.menubar1:after {
   content: "";
   width: 100%;
   display: inline-block;
}

.how2{
   background-color: #white;
   background-size: cover;
   max-width: 250px;
   min-width: 135px;
   color: gold;
 }

////HTML CODE
<div class="menubar1">
    <div class="how2" style="cursor: pointer;" 
     onclick="window.location='http://somepage.com';">Title</div>
     ...and other 4 same divs
</div>

Answer 1

我强烈建议您更多地了解css flexbox。它具有浏览器友好性，可以让您在将来更轻松地创建流畅的布局。

在我提供的示例中，flex属性应用于父容器，该容器需要居中的div。 Justify-content:center将它们水平居中，align-items:center垂直对齐它们。有许多不同的选项可以控制您的布局，您可以在此处了解有关它们的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.parent{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}

.child{
  flex: 0 0 20%;
  margin:.5em;
  background-color:black;
  color:white;
  text-align:center;
}

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
</div><!--parent -->

Answer 2

如果你想以div为中心，你可以使用margin：0 auto;

示例：

divToCenter{
      margin: 0 auto;
}

更多信息here

Answer 3

你的意思是这样的中心吗？

text-align:center;

在menubar1上。内联样式也是不好的做法，也是多余的。

＆＃13;

.menubar1{
   background: #ffffff00;
   width:95%;
   max-width:95%;
   margin-right: auto;
   height: 70px;
   margin-left: auto;
   margin-top: 5%;
   border-top-right-radius: 50px;
   border-top-left-radius: 50px;
   position: static;
   margin-bottom: -18px;   text-align:center; 
}
.menubar1>div{
   width: 17%; 
   display: inline-block;
   vertical-align: top;
   height: 45%;
   zoom: 1;
   background-position: center;
   text-align: center;
   font-size: 23px;
   padding-top: 10px;
   font-family: cursive;        
   font-weight: 600;
   margin-top: 5px;
}
.menubar1:after {
   content: "";
   width: 100%;
   display: inline-block;
}

.how2{
   background-color: #white;
   background-size: cover;
   max-width: 250px;
   min-width: 135px;
   color: gold;
 }

＆＃13;

<div class="menubar1">
    <div class="how2" style="cursor: pointer;" 
     onclick="window.location='http://somepage.com';">Title</div>
     <div class="how2" style="cursor: pointer;" 
     onclick="window.location='http://somepage.com';">Title</div>
     <div class="how2" style="cursor: pointer;" 
     onclick="window.location='http://somepage.com';">Title</div>
     <div class="how2" style="cursor: pointer;" 
     onclick="window.location='http://somepage.com';">Title</div>
</div>

＆＃13;

Answer 4

首先不要在css文件中使用position css属性：

你必须给出位置值默认值。然后你必须像这样改变代码

<style>
 .menubar1{
  background: #ffffff00;
  width:50%;
  max-width:95%;   
  height: 70px;  
  margin:0 auto;
  }
 .menubar1>div{
  width: 10%; 
  display: inline-block;
  vertical-align: top;
  height: 45%;
  zoom: 1;
  background-position: center;
  text-align: center;
  font-size: 23px;
  padding-top: 10px;
  font-family: cursive;        
  font-weight: 600;
  margin-top: 5px;
 }
.menubar1:after {
  content: "";
  width: 100%;
  display: inline-block;
 }

.how2{
  background-color: #white;
  background-size: cover;
  max-width: 250px;
  min-width: 135px;
  color: gold;
}
</style>

<div class="menubar1">
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div>
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div>
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div>
    <div class="how2" style="cursor: pointer;" 
    onclick="window.location='http://somepage.com';">Title</div>

这里我改变了你的代码。希望我认为你期待这样。我的输出是

Answer 5

我觉得你的代码可能更有效率，也许我没有看到全局，但下面的代码效果更好：

＆＃13;

  body {margin:0;}

  .maxScreenSize {margin: 0 auto;max-width: 1280px} /* you dont usually want your menu expanding for ever, this puts a limit on how far the menu will extend, change 1280px to which ever screen size you think will for best for this element */
  
  .topnav-containter {
    background-color: #777; /* This is grey for testing, you can change it back to white if you like*/
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    padding-left: 50px; /* Added so that hover effect doesn't appear on the curves */
    padding-right: 50px; /* Added so that hover effect doesn't appear on the curves */
    margin-top: 10px; /* I dropped the %5 because I think fruther along in your web build (maybe the responsiveness stage) the percentage here wont make sense. */
  }
  
  .topnav {
    overflow: hidden;
    font-size: 23px;
    font-family: cursive;        
    font-weight: 600;

  }

  .topnav a {
    float: left;
    width: 20%; /* 5 buttons, so 100 / 5 = 20 */
    color: gold;
    text-align: center;
    text-decoration: none;
    padding: 16px 0; /* Padding for top and bottom only, left and right will cause the buttons to not fit evenly across */
  }
  
  /* Drop this if you dont want a hover effect */
  .topnav a:hover {
    background-color: #eee;
    color: black;
  }

＆＃13;

  <div class="maxScreenSize">
    <div class="topnav-containter">
      <div class="topnav">
        <a href="#">Title</a>
        <a href="#">Title</a>
        <a href="#">Title</a>
        <a href="#">Title</a>
        <a href="#">Title</a>
      </div>
    </div>
  </div>

＆＃13;

如何在div中定位这几个div

5 个答案: