以兩個並排div爲中心內容

不確定爲什麼我的每個div內的內容看起來都彼此對中。

我已經構建了一個主容器和兩個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 &amp; 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 &amp; 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>

來源

2017-08-29 Jacob Jordan

我認爲它已經在中心？ –

你可以給css父類'''text-center''和你的裏面或子div使用'''margin：0px auto''' –

謝謝，Ashish。這工作 - 我不明白爲什麼，但它確實！ :) 謝謝！ –

添加一個外部容器div並添加此規則。

.container{ 
display:flex; 
Justify-content:center; 
}

和內部格

.inner { 
display: flex; 
flex-direction:row; 
}

並且該結構將是（這是哈巴狗）

div(class="container ") 
    div(class=" inner") 
     div my_left 
     div my_right

設置左，右的div寬度。

來源

2017-08-29 02:52:01 crook

這很好，謝謝。任何想法如何使這更加敏感？現在，正確的div不屬於左邊的div，並且這些詞在小屏幕上重疊。 –

你可以給CSS來text-center父類，併爲您的內部或孩子的div使用margin:0px auto;。這將導致你的每個子元素都在div內。

來源

2017-08-29 02:45:17

以兩個並排div爲中心內容

回答

相關問題