代码之家 › 专栏 › 技术社区 › isk27

括号中一行中的div居中时出现问题

adobe-brackets css html

1

isk27 · 技术社区 · 8 年前

我试图在a行中居中4列。试着用代码笔或类似的工作,我想,但在adobe括号不工作,我不知道是否有错误或东西。。。有人知道吗?

PD.:在我的括号输出中,所有内容都在左边。

body {
  position: relative;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-fluid {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
}
.content {
  padding: 100px 0;
}
.content-2 {
  color: violet;
  background-color: blueviolet;
}
div.img {
  margin: 5px;
  float: center;
  width: 180px;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  margin-right: 0 auto;
  width: 90%;
}

<section class="content content-2">
  <div class="container">
    <div class="row row-centered">
      <div class="img col-md-2 col-centered">
        <img src="forest.jpg" alt="Forest">
        <div class="desc">
          <h3>CREATIVIDAD</h3> 
          <p>hhhhhhhhhhhhhhhh</p>
        </div>
      </div>
      <div class="img col-md-2 col-centered">
        <img src="forest.jpg" alt="Forest">
        <div class="desc">
          <h3>DISEÃO</h3> 
          <p>hhhhhhhhhhh</p>
        </div>
      </div>
      <div class="img col-md-2 col-centered">
        <img src="forest.jpg" alt="Forest">
        <div class="desc">
          <h3>MULTIMEDIA</h3> 
          <p>hhhhhhhhhhhhh</p>

        </div>
      </div>
      <div class="img col-md-2 col-centered">
        <img src="forest.jpg" alt="Forest">
        <div class="desc">
          <h3>WEB</h3> 
          <p>hhhhhhhhhhh</p>

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

1 回复 | 直到 8 年前

1

0

Saurav Rastogi 8 年前

使用 CSS Flexbox .将flexbox属性应用于 .row-centered 以及 .col-centered :

.row-centered {
  display: flex; /* Flex Container */
  flex-wrap: wrap; /* Wrap the content to next line if required */
  justify-content: center; /* Horizontally content to center */
  align-items: center;
}

.col-centered {
  display: flex; /* Flex Container */
  flex-direction: column; /* Flex Direction - Column */
  justify-content: center; /* Vertically Center Alignment */
  float: none;
  margin-right: 0 auto;
  width: 90%;
}

请看下面的代码片段( 使用全屏 ):

body {
  position: relative;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container-fluid {
  width: inherit;
  height: inherit;
  margin: 0;
  padding: 0;
}
.content {
  padding: 100px 0;
}
.content-2 {
  color: violet;
  background-color: blueviolet;
}
div.img {
  margin: 5px;
  float: center;
  width: 180px;
}
div.img img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
.row-centered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.col-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  float: none;
  margin-right: 0 auto;
  width: 90%;
}

<section class="content content-2">
  <div class="container">
    <div class="row row-centered">
      <div class="img col-md-2 col-centered">
        <img src="http://placehold.it/30x30" alt="Forest">
        <div class="desc">
          <h3>CREATIVIDAD</h3> 
          <p>hhhhhhhhhhhhhhhh</p>
        </div>
      </div>
      <div class="img col-md-2 col-centered">
        <img src="http://placehold.it/30x30" alt="Forest">
        <div class="desc">
          <h3>DISEÃO</h3> 
          <p>hhhhhhhhhhh</p>
        </div>
      </div>
      <div class="img col-md-2 col-centered">
        <img src="http://placehold.it/30x30" alt="Forest">
        <div class="desc">
          <h3>MULTIMEDIA</h3> 
          <p>hhhhhhhhhhhhh</p>

        </div>
      </div>
      <div class="img col-md-2 col-centered">
        <img src="http://placehold.it/30x30" alt="Forest">
        <div class="desc">
          <h3>WEB</h3> 
          <p>hhhhhhhhhhh</p>

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

希望这有帮助!