CSSでテキストの列を中央に揃える方法

Question

小規模（初心者）のプロジェクトで2つのテキスト列を持つピクルがあり、友人と私が取り組んでいます。これが私たちのコードです。

h3 { 
text-align: left; 
font-family: Times; 
display:flex; 
align-items:center; 
} 



.AboutBA { 
text-align: justify; 
width: 400px; 
height: 300px; 
position: relative; 
left: 190px; 

} 

.Position { 
text-align: justify; 
width: 400px; 
height: 300px; 
position: relative; 
left: 650px; 
bottom: 319px; 
} 

私はレイアウトを破壊しないように、あまり変更したくないが、私が探している唯一のことは、彼らは上の写真の下に立つように、2つのテキスト列を中央にあります。

Here is how the code looks as of now.

Answer 1

.textDiv { 
 
     width: 100%; 
 
     background-color: #CDD0E1; 
 
     position: absolute; 
 
     bottom: 0; 
 
     right: 0; 
 
     display: table; 
 
     height:200px; 
 
    } 
 

 
     .textDiv div { 
 
      float: left; 
 
      width: 35%; 
 
      padding:10px 5% 20px; 
 
      display: inline-table; 
 
     } 
 
    .textDiv div span { 
 
       text-align: justify; 
 
        font-size: 13px; 
 
      } 
 
      .textDiv div strong { 
 
       font-size: 16px; 
 
       line-height: 40px; 
 
       text-align: left !important; 
 
      }

<div class="textDiv"> 
 
    <div> 
 
    <strong> teacher empowers kids</strong> 
 
    <br /> 
 
    <span>Chris Ulmer, 28, reflects on the decision to leave his teaching career in order to focus on a worldwide mission. 
 
    </span> 
 
    </div> 
 
    <div> 
 
    <strong> How he found his calling</strong> 
 
    <br /> 
 
    <span> Ulmer, originally from Philadelphia, attended Penn State where he majored in media effects, or “the way social media affects those who take it in,” he explains. 
 
    </span> 
 
    </div> 
 
</div>