2つのdivカラムのいずれかを整列する方法

Question

2つのカラムの左カラムを整列する際に問題があります。私はそれらをページの中央に反応的に表示したい。ここで

See image

私の現在のコードは次のとおりです。事前に

<div style="background: url('http://www.house-for-fast-cash.com/wp-content/uploads/2016/06/houses-background.jpg')"> 
<center><h2>WE BUY HOUSES Any Reason, Any Condition</h2></center> 
<div style="width: 100%"> 
     <div style="width: 50%; float: left; display: inline-block; "> 
      <ul> 
      <li>Behind on taxes</li> 
      <li>Behind in Payment</li> 
      <li>Vacant/Vandalized</li> 
      <li> Inheritance</li> 
      <li>Expire Listing </li> 
      </ul> 
     </div> 
     <div style="width: 50%; display: inline-block;"> 
      <ul> 
       <li>Bad Tenant</li> 
       <li>Facing Foreclosure</li> 
       <li>Divorce</li> 
       <li>Tired Landlord</li> 
       <li>Fire Damage</li> 
      </ul> 
     </div> 
    </div> 
<center><h2><strong><a href="http://www.house-for-fast-cash.com/contact/">Get Me An Offer RIGHT AWAY!</a></strong><strong></h2></center> 
</div> 

ありがとう！

クレア

Answer 1

一つの方法は、このようなものです追加のラッパーでdisplay: inline-blockをこのようにして、テキストを左に揃えます：

http://codepen.io/anon/pen/jryYxW

Answer 2

はこれが可能であるいくつかの変更では、この

<div style="width: 50%; text-align:right; display: inline-block; "> 

Answer 3

のような最初のdivを行います

<div style="background: url('http://www.house-for-fast-cash.com/wp-content/uploads/2016/06/houses-background.jpg')"> 
<center><h2>WE BUY HOUSES Any Reason, Any Condition</h2> 
<div style="display:inline-block;text-align:left;"> 
     <div style="width: 50%; float: left; display: inline-block; "> 
      <ul> 
      <li>Behind on taxes</li> 
      <li>Behind in Payment</li> 
      <li>Vacant/Vandalized</li> 
      <li> Inheritance</li> 
      <li>Expire Listing </li> 
      </ul> 
     </div> 
     <div style="width: 50%; display: inline-block;"> 
      <ul> 
       <li>Bad Tenant</li> 
       <li>Facing Foreclosure</li> 
       <li>Divorce</li> 
       <li>Tired Landlord</li> 
       <li>Fire Damage</li> 
      </ul> 
     </div> 
    </div> 
<h2><strong><a href="http://www.house-for-fast-cash.com/contact/">Get Me An Offer RIGHT AWAY!</a></strong><strong></h2></center> 
</div> 

注意をDIVだけのように広いようにさせるdisplay:inline-block;それが必要なので、それは中心に置くことができます。

HTMLコードからスタイルを分離する方がよいでしょう。 inlineの外側のdivとdisplayでcenterに

Answer 4

セットtext-align、両方の内側のdiv要素でleftからtext-align。

ここに作業コードがあります。あなたが弾丸の跡に沿って整列された最初のリストが必要な場合は、あなたがそれを配置する必要が

http://codepen.io/anon/pen/qNRpoo

：それを行うには

<div style="background: url('http://www.house-for-fast-cash.com/wp-content/uploads/2016/06/houses-background.jpg'); "> 
 
<center><h2>WE BUY HOUSES Any Reason, Any Condition</h2></center> 
 
<div style=" text-align: center;"> 
 
     <div style="display: inline-block; text-align: left;"> 
 
      <ul> 
 
      <li>Behind on taxes</li> 
 
      <li>Behind in Payment</li> 
 
      <li>Vacant/Vandalized</li> 
 
      <li> Inheritance</li> 
 
      <li>Expire Listing </li> 
 
      </ul> 
 
     </div> 
 
     <div style="display: inline-block; text-align: left;"> 
 
      <ul> 
 
       <li>Bad Tenant</li> 
 
       <li>Facing Foreclosure</li> 
 
       <li>Divorce</li> 
 
       <li>Tired Landlord</li> 
 
       <li>Fire Damage</li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
<center><h2><strong><a href="http://www.house-for-fast-cash.com/contact/">Get Me An Offer RIGHT AWAY!</a></strong><strong></h2></center> 
 
</div>