无法将父内联块DIV与内部子内联块DIV居中

时间:2017-12-05 22:23:58

标签: html css

我在父div中有2个DIV,它们以内联方式显示。问题是2 DIVS中的一个也需要内联显示,这阻止了我们两者的居中。基本上我需要左侧的内联按钮和总结右侧页面信息的文本。文本和按钮必须居中。 https://jsfiddle.net/yLnt56ew/1/



.all_parent {
  text-align: center;
  margin: auto;
}

.Box_button {
  height: 200px;
  width: 200px;
  font-size: 20px;
  background-color: #4286f4;
  margin: 15px 15px;
  -webkit-box-shadow: 0px 0px 13px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 13px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 13px 0px rgba(50, 50, 50, 0.75);
  vertical-align: middle;
  display: inline-block;
}

.Box_button:hover {
  background-color: #1e75ff;
}

.box_text {
  font-family: Arial;
  color: white;
  margin-top: 95px;
  text-align: center;
}

.Box_parent {
  max-width: 700px;
}

#project_line {
  display: inline-block;
  vertical-align: top;
}

.project_text {
  text-align: left;
  max-width: 350px;
  font-size: 19px;
  font-family: Arial;
  margin-left: 50px;
}

<div id="all_parent">

  <div class="Box_parent" id="project_line">
    <a>
      <div class="Box_button">
        <div class="box_text"> TEST </div>
      </div>
    </a>
    <a>
      <div class="Box_button">
        <div class="box_text"> TEST </div>
      </div>
    </a>
    <a>
      <div class="Box_button">
        <div class="box_text"> TEST </div>
      </div>
    </a>
    <a>
      <div class="Box_button">
        <div class="box_text"> TEST </div>
      </div>
    </a>
    <a>
      <div class="Box_button">
        <div class="box_text"> TEST </div>
      </div>
    </a>
    <a>
      <div class="Box_button">
        <div class="box_text"> TEST </div>
      </div>
    </a>
  </div>

  <div id="project_line" class="project_text">
    <h1>TEST </h1>
    <a> TEST</br> random text and some more random text! random text and some more random text! random text and some more random text! </br></br> TEST </br> random text and some more random text! </a>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

&#34; all_parent&#34;是一个ID不是一个类。

将CSS中的%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools 更改为.all_parent并确保居中工作。

另外,您应该仔细检查您的标记,因为您要省略元素的结束标记。