Bootstrap对齐嵌套列中的元素

时间:2016-08-03 07:27:05

标签: css image twitter-bootstrap containers vertical-alignment

虽然我在网上以及这里发现了所有帖子,但我看了几遍,但这些方法似乎都没有效果。 这个问题可能是一个共同主题的重复,但问题可能是这个代码所特有的......

<section class="x-graphic">
  <div class="container">

    <div class="col-md-2">
      <img src="images/x1.png" class="x1">
    </div>

    <div class="col-md-1">
      <img src="images/x2.png" class="x2">
    </div>

      <div class="col-md-2">
        <div class="row x-items">
            <div class="imageOne">
              <img src="images/imageOne.png" title="imageOne">&emsp;text&emsp;<p id="imageOne"></p>
            </div>
            <div class="imageTwo">
              <img src="images/imageTwo.png" title="imageTwo">&emsp;text&emsp;<p id="imageTwo"></p>
            </div>
            <div class="imageThree">
              <img src="images/imageThree.png" title="imageThree">&emsp;text&emsp;<p id="imageThree"></p>
            </div>
            <div class="imageFour">
              <img src="images/imageFour.png" title="imageFour">&emsp;text&emsp;<p id="imageFour"></p>
            </div>
      </div>
    </div>

  </div>
</section>

我的CSS是:

body {
  padding-top: 90px;
  overflow-x: hidden;
 }
.x1{
    margin-top: 5%;
    margin-left: 10%;
    width: 160px;
    margin-top: 20px;
}

.x2 {
    width: 50px;
    margin-top: 120px;
}

.x-items img {
    height: auto;
    width: 30px;
}

.x-graphic p {
    margin-top: 130px;
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-weight: bold;
    color: #000;
    display: inline;
}
section p {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 40px;
}

问题:

1)我没有做任何事情将<img>行中的x-items集中到垂直中心。我可以水平居中,但不能垂直居中。

2)我无法将容器内的元素水平居中,我只能使用col-md-offset-x ...

0 个答案:

没有答案