左浮动图像与两个堆叠文本框对齐

Question

难以将这些图像（现在的时钟）与文本对齐。理想情况下，文本将以图标为中心，但不会发生。

网站是yodega.com/sell。

随着时间的推移，时钟也慢慢降低（不知道会发生什么）。

此外，在网络上，图像位于文本下方，但在移动设备上，图像位于文本上方。我相信我需要彻底重组这个，但不知道如何去做。非常欣赏任何想法。

body {
  background: #3a3a3a;
}

p {
  background: rgba(0, 0, 0, 0);
}

html,
body,
h1,
h2,
h3,
h4,
ul,
ol,
li,
p,
a {
  padding: 0;
  border: 0;
  margin: 0;
}

h1 {
  color: #FAD48B;
  margin: 15px 0 15px;
  text-align: left;
}

h2 {
  color: #FAD48B;
  margin: 20px 0 5px 0;
  padding: 2px;
}

h3 {
  color: #FAD48B;
  margin: 10px 0 10px 0;
  font-size: 12px;
}


/*removes top nav put back once live!*/

.nav {
  display: none;
}


/*removes top nav !!put back once live!! */

.navbar-top-area.navbar-inverse {
  display: none;
}


/*removes menu !!put back once live!! */

.site-header .menu-container {
  display: none;
}


/* adds some yellow space below yodega loga in header*/

.site-header .container {
  padding-bottom: 10px;
}


/*attepmt to fix header to top*/

.header {
  position: fixed;
}


/*sell title = title "Sell Food Online with Yodega"*/

.sell-title {
  margin-bottom: 10px;
  font-size: 55px;
  padding-bottom: 40px;
  font-family: sans-serif;
  text-weight: bold;
  line-height: 55px;
}


/*sets paramaters of smaller benefits icon*/

.benefit-icon {
  width: 20%;
  height: 60px;
  margin-top: 5px;
  margin-bottom: 5px;
  float: left;
}

.benefit-icon img {
  max-width: 100%;
  height: auto;
}


/*sets paramaters of larger benefits text*/

.benefit-title {
  width: 80%;
  height: 40px;
  float: left;
  Margin-top: 10px;
  margin-bottom: 5px;
  font-size: 22px;
  font-decoration: bold;
  line-height: 20px;
}


/*sets paramaters of smaller benefits text*/

.benefit-detail {
  width: 80%;
  height: 30px;
  float: left;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 15px;
}

.astericks {
  margin-top: 100px;
  font-size: 13px;
}

@media screen and (max-width: 692pxpx) {
  .main,
  .small {
    width: 100%;
    float: none;
  }
}


/*changes outer background color of sign up form*/

#mailchimpsf_widget-2 {
  background: #3A3A3A;
}


/*changes signup form title font color*/

#mailchimpsf_widget-2 .widget-title {
  color: #FAD48C;
  font-size: 35px;
  font-weight: bold;
}


/*removes signup box inner border*/

#mc_signup_form {
  border: none;
}


/*changes signup button colors*/

#mc_signup_submit {
  background: #FAD48C;
  color: #3A3A3A;
  font-weight: bold;
  font-size: 20px;
}

<div class="sell-title">Sell Food Online with Yodega</div>

<div>
  <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
  <div class="benefit-title blue">
    <div class="benefit-title blue"><b>Fast &amp; Easy Set Up – Start Selling Today</b></div>
  </div>
  <div class="benefit-detail purple">
    <div class="benefit-detail purple">store complete in 10 minutes with no programming required</div>
  </div>
  <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
  <div class="benefit-title blue">
    <div class="benefit-title blue"><b>Zero Set Up Cost: free Store &amp; Listings</b></div>
  </div>
  <div class="benefit-detail purple">
    <div class="benefit-detail purple">keep more of your money – only very small selling fees*</div>
  </div>
  <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
  <div class="benefit-title orange"><b>Your Own Personal Store – Custom URL &amp; Store</b></div>
  <div class="benefit-detail green">your own store page with direct web link</div>

  <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
  <div class="benefit-title orange"><b>Hassle-Free: Yodega Takes Care of Everything</b></div>
  <div class="benefit-detail green">you can focus on what you do best</div>
  <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
  <div class="benefit-title orange"><b>Reduce your fee rate with referrals</b></div>
  <div class="benefit-detail green">each seller you refer <b>permanently</b> reduces your fee rate**</div>
</div>

<div class="astericks">

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

Answer 1

此代码对您有所帮助。

<强> HTML

<div class="div-main-container">
    <div class="div-left-side">
        <img src="blankClock.png" />
    </div>
    <div class="div-right-side">
        <div class="div-right-ele-heading">Fast & Easy Set Up – Start Selling Today</div>
        <div class="div-right-normal-text">store complete in 10 minutes with no programming required</div>
    </div>
</div>
<div class="clear"></div>
<div class="div-main-container">
    <div class="div-left-side">
        <img src="blankClock.png" />
    </div>
    <div class="div-right-side">
        <div class="div-right-ele-heading">Fast & Easy Set Up – Start Selling Today</div>
        <div class="div-right-normal-text">store complete in 10 minutes with no programming required</div>
    </div>
</div>

<强> CSS

.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%}
.div-right-normal-text{font-size: 15px;}
.div-right-ele-heading{color: #444;font-size: 20px;font-weight:800}

在上面的代码中，如果我们将使用 vertical-align：middle; 属性，那么这将无效，因为此处文本容器的高度未修复，这就是我们使用边距

如果您希望文字位于图片中间，则需要将 margin-top 添加到此类 .div-right-side 。

在上面的代码中，我已经添加了margin-top。

移动视图更改

@media(max-width:560px){
        .div-left-side {padding-top: 4%}
    }
    @media(max-width:767px){
        .div-left-side {width: 25%;}
        .div-left-side img{width: 80%}
        .div-right-side {width: 75%}
    }
    @media (min-width:768px) and (max-width:992px){
        .div-left-side {width: 25%;}
        .div-right-side {width: 75%;float: left;margin-top: 7%}
    }

此处我根据媒体查询标准使用 @media 查询移动视图。

Answer 2

使用 Flex ： 我已经改变了一点结构，并尽可能多地保留你的结构。 它只是一个起点，你可以相应调整。

＆＃13;

＆＃13;

body {
  background: #fff;
}

p {
  background: transparent;
}

html, body, h1, h2, h3, h4, ul, ol, li, p, a {
  padding: 0;
  border: 0;
  margin: 0;
}

h1 {
  color: #FAD48B;
  margin: 15px 0 15px;
  text-align: left;
}

h2 {
  color: #FAD48B;
  margin: 20px 0 5px 0;
  padding: 2px;
}

h3 {
  color: #FAD48B;
  margin: 10px 0 10px 0;
  font-size: 12px;
}

/*removes top nav put back once live!*/
.nav {
  display: none;
}

/*removes top nav !!put back once live!! */
.navbar-top-area.navbar-inverse {
  display: none;
}

/*removes menu !!put back once live!! */
.site-header .menu-container {
  display: none;
}

/* adds some yellow space below yodega loga in header*/
.site-header .container {
  padding-bottom: 10px;
}

/*attepmt to fix header to top*/
.header {
  position: fixed;
}

/*sell title = title "Sell Food Online with Yodega"*/
.sell-title {
  margin-bottom: 10px;
  font-size: 55px;
  padding-bottom: 40px;
  font-family: sans-serif;
  text-weight: bold;
  line-height: 55px;
}

/*sets paramaters of smaller benefits icon*/
.benefit-icon img {
  max-width: 100%;
  height: auto;
}

/*sets paramaters of larger benefits text*/
.benefit-title {
  font-size: 22px;
  font-decoration: bold;
  line-height: 20px;
}

/*sets paramaters of smaller benefits text*/
.benefit-detail {
  font-size: 15px;
  line-height: 15px;
}

.astericks {
  margin-top: 100px;
  font-size: 13px;
}

@media screen and (max-width: 692pxpx) {
  .main, .small {
    width: 100%;
    float: none;
  }
}
/*changes outer background color of sign up form*/
#mailchimpsf_widget-2 {
  background: #3A3A3A;
}

/*changes signup form title font color*/
#mailchimpsf_widget-2 .widget-title {
  color: #FAD48C;
  font-size: 35px;
  font-weight: bold;
}

/*removes signup box inner border*/
#mc_signup_form {
  border: none;
}

/*changes signup button colors*/
#mc_signup_submit {
  background: #FAD48C;
  color: #3A3A3A;
  font-weight: bold;
  font-size: 20px;
}

.clock-area {
  display: flex;
  align-items: center;
}
.clock-area > .benefit-content {
  display: flex;
  flex-direction: column;
}
.clock-area > .benefit-content > .benefit-title {
  margin-bottom: 5px;
}
.clock-area > .benefit-icon {
  width: 20%;
}

＆＃13;

<div class="sell-title">Sell Food Online with Yodega</div>

<div>

  <div class="clock-area">
    <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
    <div class="benefit-content">
      <div class="benefit-title blue">
        <div class="benefit-title blue"><b>Fast &amp; Easy Set Up – Start Selling Today</b></div>
      </div>
      <div class="benefit-detail purple">
        <div class="benefit-detail purple">store complete in 10 minutes with no programming required</div>
      </div>
    </div>
  </div>
  <div class="clock-area">
    <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
    <div class="benefit-content">
      <div class="benefit-title blue">
        <div class="benefit-title blue"><b>Fast &amp; Easy Set Up – Start Selling Today</b></div>
      </div>
      <div class="benefit-detail purple">
        <div class="benefit-detail purple">store complete in 10 minutes with no programming required</div>
      </div>
    </div>
  </div>
  <div class="clock-area">
    <div class="benefit-icon"><img src="http://www.yodega.com/images/blankClock.png" /></div>
    <div class="benefit-content">
      <div class="benefit-title blue">
        <div class="benefit-title blue"><b>Fast &amp; Easy Set Up – Start Selling Today</b></div>
      </div>
      <div class="benefit-detail purple">
        <div class="benefit-detail purple">store complete in 10 minutes with no programming required</div>
      </div>
    </div>
  </div>

</div>

<div class="astericks">

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

＆＃13;

＆＃13;

＆＃13;