Question

尝试将内容集中在两个并排的div中。

不确定为什么我在每个div中的内容似乎都是彼此关注的。

我已经构建了一个主容器和两个div。文本是居中对齐的，但不确定如何将内容集中在div中。

有什么想法吗？

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

再添加一个外部容器div并添加此规则。

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

内在的div

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

结构将是（这是哈巴狗）

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

设置左右div的宽度。

Answer 2

您可以将CSS提供给父类text-center，并为您的内部或子级div使用margin:0px auto;。这将导致您的每个子元素都在div中。

以两个并排的Div为中心内容

2 个答案: