以Div为中心，包含图像和文本

Question

.clear{clear:both}
.div-main-container{width:100%}
.div-left-side{width:12%;float:left}
.div-right-side{width:80%;float:left;margin-top: 3%}

.sell-banner{
    text-align:center;
    margin-bottom:10px;

}
.sell-title{
    margin-bottom:5px;
    font-size:50px;
    padding-bottom:5px;
    font-family: sans-serif;
    text-weight:bold;
    line-height: 60px;
    text-align: center;
}
.sell-detail{
    margin-bottom:10px;
    font-size:20px;
    padding-bottom:15px;
    font-family: "Futura", sans-serif;
    text-weight:bold;
    line-height: 22px;
}
.astericks{
    font-family: "Futura", sans-serif;
    margin-top:15px;
    padding-top:15px;
    font-size: 13px;

<div class="sell-title">Create Your Online Food Store with Yodega</div>
            <div class="clear"></div>

    
<div class="sell-banner">
    <a href="https://staging.yodega.com/wp-content/uploads/2017/07/Screen-Shot-2017-08-13-at-1.39.13-PM.png"><img src="https://staging.yodega.com/wp-content/uploads/2017/07/Screen-Shot-2017-08-13-at-1.39.13-PM-1024x350.png"  class="aligncenter size-large wp-image-452" /></a>
    </div>
            <div class="clear"></div>

<div class="sell-detail">Do you make a food or drink product people are crazy about? Grow your business and sell nationwide with Yodega!</div>
<div class="div-main-container">
<div class="div-left-side">
        <img src="<a href="https://staging.yodega.com/wp-content/uploads/2017/07/yYodegaLogo.png"><img src="https://staging.yodega.com/wp-content/uploads/2017/07/yYodegaLogo.png" alt="" width="501" height="501" class="aligncenter size-full wp-image-54" /></a></div>
<div class="div-right-side">
<div class="div-right-ele-heading">Insanely Easy & Fast Store Set Up</div>
<div class="div-right-normal-text">Create your store in 10 minutes with no programming hassles</div>
</div>
</div>
<div class="clear"></div>
<div class="div-main-container">
<div class="div-left-side">
      <img src="/images/yodegaY.png" /></div>
<div class="div-right-side">
<div class="div-right-ele-heading">Zero Set Up Cost: Free Store & Listings</div>
<div class="div-right-normal-text">Your only cost is very small selling fees*</div>
</div>
</div>
<div class="clear"></div>
<div class="div-main-container">
<div class="div-left-side">
      <img src="/images/yodegaY.png" /></div>
<div class="div-right-side">
<div class="div-right-ele-heading">Your Own Personal Store with Custom URL</div>
<div class="div-right-normal-text">Create your own custom branded store page with direct web link</div>
</div>
</div>
<div class="clear"></div>
<div class="div-main-container">
<div class="div-left-side">
      <img src="/images/yodegaY.png" /></div>
<div class="div-right-side">
<div class="div-right-ele-heading">Hassle-Free: Yodega Takes Care of Everything</div>
<div class="div-right-normal-text">Seller tools & dashboard makes selling a breeze</div>
</div>
</div>
<div class="clear"></div>
<div class="div-main-container">
<div class="div-left-side">
      <img src="/images/yodegaY.png" /></div>
<div class="div-right-side">
<div class="div-right-ele-heading">Reduce Your Fee Rate with Referrals</div>
<div class="div-right-normal-text">Each seller you refer permanently reduces your fee rate**</div>
</div>
</div>

<div class="clear"></div>

<div class="astericks">

*base rate (4.9%) + typical credit card processing fees

**A vaild referral requires a recommendation within 1 month of referral store opening. Store must sell $300 of sales before referral rate reduction activates. Maximium .9% in reduction from standard fee rate from referral incentives.</div>
    
    </div>


<div id="buttons">
  <a href="http://www.google.com"><button type="button contact-button" id="button1">Sign Up</button>
  <a href="http://www.google.com"><button type="button contact-button" id="button2">Seller Resources</button
</div>

<div class="clear"></div>

好奇我将如何将屏幕中间的内容集中在这里？从y徽标图像开始。还在寻找一种方法来保持在移动设备上的良好组织。我基本上只需要将内容置于div中心（不是文本的中心）。

div title = div-main-container

网站：https://staging.yodega.com/sell/

谢谢！

Answer 1

将您使用的div居中：

div { margin: 0 auto; }

至于在移动设备上保持整理，我建议先添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在你的<head></head>中，以及使用bootstrap，它使用可以很好地将元素扩展到移动平台的类。

Answer 2

要使div居中，请使用以下内容：

.div-main-container {margin: 0 auto;}

或

#div-main-container {margin: 0 auto;}

（取决于你是否使用ID或Class.ID使用＃。）这将使div本身居中，而不是内容。