CSS将div放置在居中的div中

时间：2017-06-20 08:30:14

标签： html css

我所做的是在中心放置一个div。但是，我无法将这些按钮放在居中div的中心。我想将所有行放在中心位置。这些分隔符可以调整，因为我只想将它们分开。

enter image description here 

    .button {
        padding: 13px 5%;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color:black;
        background-color: #f4ef73;
        border-color: black;
        border-style: solid;
        border-width: 4px;
        border-radius: 15px;
        float: left;
    }    

    .row {
        float:left;
        width:100%;
        display:block;
    }

     #center {
         background-color:blue;
         margin: auto;
         width: 400px;
         height: 200px;
     }   

     .separatorRow{
         width:100%;
         height:20px;
         float:left;
     }

     .separatorCol{
         width:5%;
         height:60px;
         float:left;
     }

<div class="container">
    <div id="center">
        <div class="row">
            <div class="separatorCol"></div>
            <div class="button">1</div>
            <div class="separatorCol"></div>
            <div class="button">2</div>
            <div class="separatorCol"></div>
            <div class="button">3</div>
            <div class="separatorCol"></div>
            <div class="button">4</div>
            <div class="separatorCol"></div>
        </div>
        <div class="separatorRow"></div>
        <div class="row">
            <div class="separatorCol"></div>
            <div class="button">1</div>
            <div class="separatorCol"></div>
            <div class="button">2</div>
            <div class="separatorCol"></div>
            <div class="button">3</div>
            <div class="separatorCol"></div>
            <div class="button">4</div>
            <div class="separatorCol"></div>
        </div>
    </div>

</div>


 .button {
        padding: 13px 5%;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color:black;
        background-color: #f4ef73;
        border-color: black;
        border-style: solid;
        border-width: 4px;
        border-radius: 15px;
        float: left;
    }    

    .row {
        float:left;
        width:100%;
        display:block;
    }

     #center {
         background-color:blue;
         margin: auto;
         width: 400px;
         height: 200px;
     }   

     .separatorRow{
         width:100%;
         height:20px;
         float:left;
     }

     .separatorCol{
         width:5%;
         height:60px;
         float:left;
     }
<div class="container">
    <div id="center">
        <div class="row">
            <div class="separatorCol"></div>
            <div class="button">1</div>
            <div class="separatorCol"></div>
            <div class="button">2</div>
            <div class="separatorCol"></div>
            <div class="button">3</div>
            <div class="separatorCol"></div>
            <div class="button">4</div>
            <div class="separatorCol"></div>
        </div>
        <div class="separatorRow"></div>
        <div class="row">
            <div class="separatorCol"></div>
            <div class="button">1</div>
            <div class="separatorCol"></div>
            <div class="button">2</div>
            <div class="separatorCol"></div>
            <div class="button">3</div>
            <div class="separatorCol"></div>
            <div class="button">4</div>
            <div class="separatorCol"></div>
        </div>
    </div>

</div>

6 个答案:

答案 0 :(得分：2)

FlexBox可以帮助您，如下所示：）

＆＃13;
＆＃13; 
* {box-sizing:border-box;}
.button {
        padding: 13px 5%;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color:black;
        background-color: #f4ef73;
        border-color: black;
        border-style: solid;
        border-width: 4px;
        border-radius: 15px;
    }    

    .row {
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding:20px;
    }

     #center {
         background-color:blue;
         margin: auto;
         width: 400px;
         height: 200px;
     }   

     .separatorRow{
         width:100%;
         height:20px;
    

     }

     .separatorCol{
         width:5%;
         height:60px;
   
     }
＆＃13; 
<div class="container">
    <div id="center">
        <div class="row">
   
            <div class="button">1</div>
    
            <div class="button">2</div>

            <div class="button">3</div>
 
            <div class="button">4</div>
   
        </div>

        <div class="row">

            <div class="button">1</div>
 
            <div class="button">2</div>

            <div class="button">3</div>

            <div class="button">4</div>
      
        </div>
    </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您可以使用flexbox：

＆＃13;
＆＃13; 
body,
html {
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
}

.button {
  padding: 13px 5%;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: black;
  background-color: #f4ef73;
  border-color: black;
  border-style: solid;
  border-width: 4px;
  border-radius: 15px;
}

.row {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 5vh;
}

#center {
  background-color: blue;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
＆＃13; 
<div class="container">
  <div id="center">
    <div class="row">
      <div class="button">1</div>
      <div class="button">2</div>
      <div class="button">3</div>
      <div class="button">4</div>
    </div>
    <div class="row">
      <div class="button">1</div>
      <div class="button">2</div>
      <div class="button">3</div>
      <div class="button">4</div>
    </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

您可以使用display: inline-block检查更新后面的代码段来设置它; 

.button {
  padding: 13px 5%;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: black;
  background-color: #f4ef73;
  border-color: black;
  border-style: solid;
  border-width: 4px;
  border-radius: 15px;
  display: inline-block;
  margin: 20px 2.5% 20px 2.5%;
}

.row {
  float: left;
  width: 100%;
  display: block;
  text-align: center;
}

#center {
  background-color: blue;
  margin: auto;
  width: 400px;
  height: 200px;
}

.separatorRow {
  width: 100%;
  height: 20px;
  float: left;
}

.separatorCol {
  width: 5%;
  height: 60px;
  display: inline-block;
}
<div class="container">
  <div id="center">
    <div class="row">
      <div class="button">1</div>
      <div class="button">2</div>
      <div class="button">3</div>
      <div class="button">4</div>
      <div class="button">1</div>
      <div class="button">2</div>
      <div class="button">3</div>
      <div class="button">4</div>
    </div>
  </div>

</div>

答案 3 :(得分：1)

＆＃13;
＆＃13; 
.button {
  padding: 13px 5%;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: black;
  background-color: #f4ef73;
  border-color: black;
  border-style: solid;
  border-width: 4px;
  border-radius: 15px;
  width: 20px;
  display: inline-block;
}

.row {
  width: 100%;
  display: block;
  text-align: center;
}

#center {
  background-color: blue;
  margin: auto;
  width: 400px;
  height: 200px;
}

.separatorRow {
  width: 100%;
  height: 20px;
  float: left;
}

.separatorCol {
  width: 5%;
  height: 60px;
  float: left;
}
＆＃13; 
<div class="container">
  <div id="center">
    <div class="row">
      <div class="button">1</div>
      <div class="button">2</div>
      <div class="button">3</div>
      <div class="button">4</div>
    </div>
    <div class="separatorRow"></div>
    <div class="row">
      <div class="button">1</div>
      <div class="button">2</div>
      <div class="button">3</div>
      <div class="button">4</div>
    </div>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

*
{
    box-sizing: border-box;
}
.button {
        padding: 13px 5%;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        color:black;
        background-color: #f4ef73;
        border-color: black;
        border-style: solid;
        border-width: 4px;
        border-radius: 15px;
        float: left;
        margin: 5%;
        margin-right: 0px;
        margin-bottom: 0px;
        width: 18.75%;

    }    

    .row {
        float:left;
        width:100%;
        display:block;
    }

     #center {
         background-color:blue;
         margin:  auto;
         width: 400px;
         height: 200px;
     }   

     .separatorRow{
         width:100%;
         height:20px;
         float:left;
     }

使用border-box包含指定大小的边框宽度。 而不是使用.seperaterow包含边距值按钮类。

我使用了18.75％的宽度，因为在你的代码中你提到的宽度是5％，所以25％的空间（5 * 5），剩下75％的4个按钮（75％/ 4）。

margin-right: 0px
margin-bottom: 0px

因为我们在这里使用累积保证金。了解累积和折叠保证金。

答案 5 :(得分：-1)

请尝试以下可能会有用

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;   
    margin: auto;
}
相关问题
最新问题