将父div中的几个div居中

时间：2016-07-10 18:23:42

标签： javascript css html5

我有一些div想要在水平行中居中。我已经尝试了所有我能想到的东西并且无济于事地研究它。这是我的代码。

HTML：

<!doctype html> 
<html>
    <head>
        <title>Hello, World!</title>
        <!--references-->
        <link rel="stylesheet" type="text/css" href="styles/index.css" />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    </head>
        <body>
            <div id="wrapper">
                <div id = "box">
                    <h1 id="head">Hello, World</h1>
                    <div id = "btn-panel">
                        <button class="btn" id="btn1">panel1</button>
                        <button class="btn" id="btn2">panel2</button>
                        <button class="btn" id="btn3">panel3</button>
                        <button class="btn" id="btn4">panel4</button>
                    </div><!--button-panel-->
                </div> <!--Box-->
                        <div id = "panel-row">
                            <div class="panel" id="p1"><p class="phead">Panel#1</p><hr></div>
                            <div class="panel" id="p2"><p class="phead">Panel#2</p><hr></div>
                            <div class="panel" id="p3"><p class="phead">Panel#3</p><hr></div>
                            <div class="panel" id="p4"><p class="phead">Panel#4</p><hr></div>
                        </div><!--panel-row-->
            </div> <!--wrapper-->
        </body>
    <script src="js/Index.js" type="text/javaScript"></script>
</html>

CSS：

    body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300; 
   margin: 0px;
}

html {
    width: 100%;
    height: 100%;
    margin: 0px;
}

#wrapper {
    width: 100%;
    height: 100%;
}

#box { 
    background-color: #EEE;
    Width: 100%;
    Height: 250px;
    margin-left: auto;
    margin-right: auto;
    Text-align: center; 
}

#head {
    padding-top: 25px;
    font-size: 20pt;
}
#btn-panel {
    width: 100%;
    height: 100px;
    margin-top: 50px;
}

.btn {
    width: 100px;
    height: 50px;
    border-radius: 5px;
    margin-right: 20px;
}

#panel-row {
    width: 100%;
    height: 150px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

.panel {
    display: inline-block;
    margin-right: 25px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid gray;
    background-color: #7FFFD4;
}
.phead {
    margin-top: 10px; 
    margin-bottom: 10px; 
    margin-left: 20px; 
}

#panel-row {
    margin-right: auto; 
    margin-left: auto;  
}

任何见解将不胜感激。感谢。

4 个答案:

答案 0 :(得分：1)

解决方案1：（推荐）

使用flexbox。

使用flexbox实现这一点非常简单，您需要做的是在父元素中设置display: flex;和justify-content: center;。

CODE SNIPPET

＆＃13;
＆＃13; 
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  margin: 0px;
}
html {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#wrapper {
  width: 100%;
  height: 100%;
}
#box {
  background-color: #EEE;
  Width: 100%;
  Height: 250px;
  margin-left: auto;
  margin-right: auto;
  Text-align: center;
}
#head {
  padding-top: 25px;
  font-size: 20pt;
}
#btn-panel {
  width: 100%;
  height: 100px;
  margin-top: 50px;
}
.btn {
  width: 100px;
  height: 50px;
  border-radius: 5px;
  margin-right: 20px;
}
#panel-row {
  display: flex;
  justify-content: center;
  height: 150px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.panel {
  display: inline-block;
  margin-right: 25px;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid gray;
  background-color: #7FFFD4;
}
.phead {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}
＆＃13; 
<div id="wrapper">
  <div id="box">
    <h1 id="head">Hello, World</h1>
    <div id="btn-panel">
      <button class="btn" id="btn1">panel1</button>
      <button class="btn" id="btn2">panel2</button>
      <button class="btn" id="btn3">panel3</button>
      <button class="btn" id="btn4">panel4</button>
    </div>
    <!--button-panel-->
  </div>
  <!--Box-->
  <div id="panel-row">
    <div class="panel" id="p1">
      <p class="phead">Panel#1</p>
      <hr>
    </div>
    <div class="panel" id="p2">
      <p class="phead">Panel#2</p>
      <hr>
    </div>
    <div class="panel" id="p3">
      <p class="phead">Panel#3</p>
      <hr>
    </div>
    <div class="panel" id="p4">
      <p class="phead">Panel#4</p>
      <hr>
    </div>
  </div>
  <!--panel-row-->
</div>
<!--wrapper-->
＆＃13;
＆＃13;
＆＃13;

解决方案2：

使用inline-block元素的文本中心。

您的演示的最简单的解决方案（仅适用于inline-block元素）可能正在使用您父级中的css属性text-align: center;元素和text-align: initial;在您的子元素中。

CODE SNIPPET

＆＃13;
＆＃13; 
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  margin: 0px;
}
html {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#wrapper {
  width: 100%;
  height: 100%;
}
#box {
  background-color: #EEE;
  Width: 100%;
  Height: 250px;
  margin-left: auto;
  margin-right: auto;
  Text-align: center;
}
#head {
  padding-top: 25px;
  font-size: 20pt;
}
#btn-panel {
  width: 100%;
  height: 100px;
  margin-top: 50px;
}
.btn {
  width: 100px;
  height: 50px;
  border-radius: 5px;
  margin-right: 20px;
}
#panel-row {
  height: 150px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.panel {
  text-align: initial;
  display: inline-block;
  margin-right: 25px;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid gray;
  background-color: #7FFFD4;
}
.phead {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}
＆＃13; 
<div id="wrapper">
  <div id="box">
    <h1 id="head">Hello, World</h1>
    <div id="btn-panel">
      <button class="btn" id="btn1">panel1</button>
      <button class="btn" id="btn2">panel2</button>
      <button class="btn" id="btn3">panel3</button>
      <button class="btn" id="btn4">panel4</button>
    </div>
    <!--button-panel-->
  </div>
  <!--Box-->
  <div id="panel-row">
    <div class="panel" id="p1">
      <p class="phead">Panel#1</p>
      <hr>
    </div>
    <div class="panel" id="p2">
      <p class="phead">Panel#2</p>
      <hr>
    </div>
    <div class="panel" id="p3">
      <p class="phead">Panel#3</p>
      <hr>
    </div>
    <div class="panel" id="p4">
      <p class="phead">Panel#4</p>
      <hr>
    </div>
  </div>
  <!--panel-row-->
</div>
<!--wrapper-->
＆＃13;
＆＃13;
＆＃13;

解决方案3：

使用固定宽度。

为了使margin: 0 auto; 技巧起作用，您需要为元素设置宽度。

这是难以维护，因为您的孩子元素＆＃39;宽度可以改变，你需要改变父宽度，不要提到这可能导致的响应问题，这很可能需要解决媒体查询。

＆＃13;
＆＃13; 
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
  margin: 0px;
}
html {
  width: 100%;
  height: 100%;
  margin: 0px;
}
#wrapper {
  width: 100%;
  height: 100%;
}
#box {
  background-color: #EEE;
  Width: 100%;
  Height: 250px;
  margin-left: auto;
  margin-right: auto;
  Text-align: center;
}
#head {
  padding-top: 25px;
  font-size: 20pt;
}
#btn-panel {
  width: 100%;
  height: 100px;
  margin-top: 50px;
}
.btn {
  width: 100px;
  height: 50px;
  border-radius: 5px;
  margin-right: 20px;
}
#panel-row {
  width: 522px;
  height: 150px;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}
.panel {
  display: inline-block;
  margin-right: 25px;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  border: 1px solid gray;
  background-color: #7FFFD4;
}
.phead {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}
＆＃13; 
<div id="wrapper">
  <div id="box">
    <h1 id="head">Hello, World</h1>
    <div id="btn-panel">
      <button class="btn" id="btn1">panel1</button>
      <button class="btn" id="btn2">panel2</button>
      <button class="btn" id="btn3">panel3</button>
      <button class="btn" id="btn4">panel4</button>
    </div>
    <!--button-panel-->
  </div>
  <!--Box-->
  <div id="panel-row">
    <div class="panel" id="p1">
      <p class="phead">Panel#1</p>
      <hr>
    </div>
    <div class="panel" id="p2">
      <p class="phead">Panel#2</p>
      <hr>
    </div>
    <div class="panel" id="p3">
      <p class="phead">Panel#3</p>
      <hr>
    </div>
    <div class="panel" id="p4">
      <p class="phead">Panel#4</p>
      <hr>
    </div>
  </div>
  <!--panel-row-->
</div>
<!--wrapper-->
＆＃13;
＆＃13;
＆＃13;

<强>意见：

  • 您的css中会重复#panel-row选择器。
  • 您不需要将css属性width: 100%添加到块级元素，这是默认宽度。

答案 1 :(得分：0)

几乎在那里，你必须以 text-align：center; 为中心，因为.panels是内联的文本或跨度。

#panel-row {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

答案 2 :(得分：0)

#panel-row, .panel, .phead {
  text-align:center;
}

http://codepen.io/nagasai/pen/grGKWZ

答案 3 :(得分：0)

您可以在Yield 57% 100% 100% 100% 87% 100%

上使用text-align: center 

#panel-row
    body {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300; 
   margin: 0px;
}

html {
    width: 100%;
    height: 100%;
    margin: 0px;
}

#wrapper {
    width: 100%;
    height: 100%;
}

#box { 
    background-color: #EEE;
    Width: 100%;
    Height: 250px;
    margin-left: auto;
    margin-right: auto;
    Text-align: center; 
}

#head {
    padding-top: 25px;
    font-size: 20pt;
}
#btn-panel {
    width: 100%;
    height: 100px;
    margin-top: 50px;
}

.btn {
    width: 100px;
    height: 50px;
    border-radius: 5px;
    margin-right: 20px;
}

#panel-row {
    width: 100%;
    height: 150px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Align text inside panel row*/
}

.panel {
    display: inline-block;
    margin-right: 25px;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid gray;
    background-color: #7FFFD4;
}
.phead {
    margin-top: 10px; 
    margin-bottom: 10px; 
    /*margin-left: 20px*/ /* this margin is messing up with centered-text alignment*/
}

#panel-row {
    margin-right: auto; 
    margin-left: auto;  
}

相关问题
最新问题