2つのサイドバイサイドディビジョンのそれぞれのコンテンツを中央に揃えようとしています。2つのサイドバイサイドディビジョンのコンテンツのセンタリング
これらのdiv内のコンテンツが互いに向かい合っているように思われる理由はわかりません。
私はそれの中にメインコンテナと2つのdivを構築しました。テキストは中央揃えですが、divの内部にコンテンツをどのように配置するかは不明です。
アイデア?
.div-header-seller-resources{
font-size:30px;
line-height:32px;
margin-bottom:10px;
}
.div-detail-seller-resources{
font-size:20px;
line-height:22px;
margin-bottom:45px;
}
.div-main-container-seller-resources{
width:100%;
}
.div-main-container-seller-resources{
margin-top:20px;
text-align: center;
display: flex;
justify-content: center;
}
.div-seller-resources-left{
width: 300px;
display: flex;
text-align:center;
}
.div-seller-resources-right{
width: 350px;
display: flex;
text-align:center;
}
.seller-resources-height{
height: 125px;
}
<div class="div-main-container-seller-resources">
<div class="div-seller-resources-left" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/how-yodega-works/">How Yodega Works</a></div>
<div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/referrals/">Referrals</a></div>
<div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/how-to-sell-with-yodega/">How to Sell with Yodega</a></div>
<div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
</div>
<div class="clear"></div>
</div>
<div class="div-seller-resources-right" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/setting-up-your-store/">Setting Up Your Store</a></div>
<div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/advanced-product-shipping/">Advanced Shipping & Product Options</a></div>
<div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources"><a href="https://yodega.com/order-management-seller-dashboard/">Order Management, Seller Dashboard & Payment</a></div>
<div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="seller-overview-button-container">
<a href="http://yodega.com/sell"><button id="button2" type="button contact-button">Seller Overview</button></a>
</div>
私はすでにそのセンターにいると思いますか? –
あなたは親クラス '' 'text-center''にcssを与え、内側または子divには' 'margin:0px auto'''を使用することができます –
ありがとう、Ashish。それはうまくいった - 私は理由を理解していないが、それはした! :) ありがとう! –