Question

我目前正在处理我的投资组合页面，但我遇到了一些问题。如何使投资组合部分居中并保持其外观（3列）？

HTML code：

<div class="wrap" style="background-color:#FAFAFA; height: 850px;">
      <div id="portfolio-container"class="portfolio" style="position: relative; height:850px; left:6%; right: 6%;">
        <div class="word" style="position: absolute; left:355px;">
          <h1> P O R T F O L I O </h1>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 7px; top:100px;">
          <div class="hovereffect">
            <a href="websitelink">
              <img class="img-responsive" width="300" height="250" src="http://i.imgur.com/1v5ifV5.jpg" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 325px; top:100px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img class="img-responsive" width="300" src="http://i.imgur.com/KZvRuzf.jpg" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 640px; top:100px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://i.imgur.com/uWGHWMJ.jpg" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 7px; top:370px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://i.imgur.com/Rvi73Kd.jpg" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 325px; top:520px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://i.imgur.com/8uhmKFS.jpg" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="position: absolute; left: 640px; top:350px;">
          <div class="hovereffect">
             <a href="websitelink">
              <img width="300" class="img-responsive" src="http://i.imgur.com/zLpahWP.jpg" alt="">
              <div class="overlay">
                <h2>itemname</h2>
              </div>
          </div>
        </div>

      </div>

CSS代码（不包括悬停图像部分）

.portfolio {
  list-style: none;
  font-size: 0px;
  width: 96%;
  margin-left: 15.5%;
}

非常感谢你的帮助。

Answer 1

删除Html代码中的样式 HTML代码将是：

<div class="wrap" style="background-color:#ddd; height: 850px;">
  <div id="portfolio-container"class="portfolio">
    <div class="word">
      <h1> P O R T F O L I O </h1>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
        <a href="websitelink">
          <img class="img-responsive" width="300" height="250" src="http://i.imgur.com/1v5ifV5.jpg" alt="">
          <div class="overlay">
            <h2>itemname</h2>
          </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
         <a href="websitelink">
          <img class="img-responsive" width="300" src="http://i.imgur.com/KZvRuzf.jpg" alt="">
          <div class="overlay">
            <h2>itemname</h2>
          </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
         <a href="websitelink">
          <img width="300" class="img-responsive" src="http://i.imgur.com/uWGHWMJ.jpg" alt="">
          <div class="overlay">
            <h2>itemname</h2>
          </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
         <a href="websitelink">
          <img width="300" class="img-responsive" src="http://i.imgur.com/Rvi73Kd.jpg" alt="">
          <div class="overlay">
            <h2>itemname</h2>
          </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
         <a href="websitelink">
          <img width="300" class="img-responsive" src="http://i.imgur.com/8uhmKFS.jpg" alt="">
          <div class="overlay">
            <h2>itemname</h2>
          </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="hovereffect">
         <a href="websitelink">
          <img width="300" class="img-responsive" src="http://i.imgur.com/zLpahWP.jpg" alt="">
          <div class="overlay">
            <h2>itemname</h2>
          </div>
      </div>
    </div>

  </div>

＆安培; CSS将是：

.wrap{text-align: center;}
.col-lg-3.col-md-4.col-sm-6.col-xs-12 {
    width: 33%;
    float: left;
}

如何集中class ='wrap'

1 个答案: