親のインラインブロックDIVと子をインラインブロックできないインラインブロックDIVの内部

Question

親div内に2つのDIVがあり、インラインで表示されます。問題は、2つのDIVSのうちの1つをインラインで表示する必要があるため、それらの両方をセンタリングできないことです。基本的には、左側にインラインボタンが必要で、右側にページの情報をまとめたテキストが必要です。テキストとボタンは中央に配置する必要があります。 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>

Answer 1

"all_parent" IDではないクラスです。

CSSの.all_parent〜#all_parentを変更してセンタリングを行います。

要素の終了タグを残しているので、マークアップももう一度確認する必要があります。