如何在不使用网格的情况下对齐图标（两条线）对称

时间：2018-01-31 09:44:04

标签： html css html5 css-float css-position

我想对齐图标，看起来如下图所示。但不允许使用Flexbox，Grid或表格。

How it should look

图片中的黑条仅代表文字。我尝试了几件事，但删除了它们，因为它并不令人满意。以下是我目前的代码。

我需要更改什么才能获得图片中的布局？

当前代码：

/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */

html, body{
  width: 100%;
  height:100%;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}


/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */

.clearfix::after{
	content:"";
	clear:both;
	display: block;
}

/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */

.entire-page{
  margin: 0 15%;
}

/* ########################################################################## */
/* Contact  */
/*  ########################################################################## */

section{
  margin: 30px 0;
  background-color: #ccc;
}

.headline{
  text-align: center;
  margin: 30px 0;
  padding: 10px;
}

.row > div{
  display:inline-block;
}
.social-media-container > div{
  display: inline-block;
}
.icon{
  text-align: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="src/css/styles5.css">
</head>

<body>

  <!-- ########################################################################## -->
  <!-- Entire Page -->
  <!-- ########################################################################## -->
  <div class="entire-page">


    <!-- ########################################################################## -->
    <!--  Contact -->
    <!--  ########################################################################## -->

    <section>

      <div>

        <div class="headline">
          <span>Lorem ipsum dolor sit: </span>
        </div>

        <div class="row clearfix">
          <div class="icon">
            <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
            <div>
              <p>1234 – 567 890 123</p>
            </div>
          </div>
          <div class="icon">
            <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
            <div>
              <p>john@doe.com</p>
            </div>
          </div>
          <div class="icon">
            <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
            <div>
              <p>John Doe</p>
            </div>
            <div>
              <p>USA</p>
            </div>
            <div>
              <p>12345 City</p>
            </div>
          </div>
        </div>
        <div class="row clearfix">
          <div class="social-media-container clearfix">
            <div class="icon">
              <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
              <div>
                <p>facebook.com/johndoe</p>
              </div>
            </div>
            <div class="icon">
              <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
              <div>
                <p>twitter.com/johndoe</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </section>
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

使用百分比和vertical-align:top及其父级为text-align:center的图标。

＆＃13;
＆＃13; 
/* ########################################################################## */
/* Global Settings */
/* ########################################################################## */

html, body{
  width: 100%;
  height:100%;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}


/* ########################################################################## */
/* Clearfix-Hack */
/* ########################################################################## */

.clearfix::after{
	content:"";
	clear:both;
	display: block;
}

/* ########################################################################## */
/* Entire Page */
/* ########################################################################## */

.entire-page{
  margin: 0 15%;
}

/* ########################################################################## */
/* Contact  */
/*  ########################################################################## */

section{
  margin: 30px 0;
  background-color: #ccc;
}

.headline{
  text-align: center;
  margin: 30px 0;
  padding: 10px;
}

.row > div{
  display:inline-block;
}
.social-media-container > div{
  display: inline-block;
}
.icon{
  text-align: center;
}

/*** solution ***/
.iconsFloat{
  text-align: center;
}
.iconsFloat .icon{
  width:32.5%;
  vertical-align: top;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="src/css/styles5.css">
</head>

<body>
 <!-- ########################################################################## -->
  <!-- Entire Page -->
  <!-- ########################################################################## -->
  <div class="entire-page">


    <!-- ########################################################################## -->
    <!--  Contact -->
    <!--  ########################################################################## -->

    <section>

      <div>

        <div class="headline">
          <span>Lorem ipsum dolor sit: </span>
        </div>

        <div class="row clearfix iconsFloat">
          <div class="icon">
            <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
            <div>
              <p>1234 – 567 890 123</p>
            </div>
          </div>
          <div class="icon">
            <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
            <div>
              <p>john@doe.com</p>
            </div>
          </div>
          <div class="icon">
            <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
            <div>
              <p>John Doe</p>
            </div>
            <div>
              <p>USA</p>
            </div>
            <div>
              <p>12345 City</p>
            </div>
          </div>
		  <div class="icon">
              <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
              <div>
                <p>facebook.com/johndoe</p>
              </div>
            </div>
            <div class="icon">
              <div><img src="https://www1.xup.in/exec/ximg.php?fid=12271612"><img></div>
              <div>
                <p>twitter.com/johndoe</p>
              </div>
            </div>
        </div>
        <div class="row clearfix">
          <div class="social-media-container clearfix">
            
          </div>
        </div>
      </div>

    </section>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题