Question

我正在尝试垂直对齐bootstrap div中的图像，而vertical-align属性不起作用。我还尝试了其他几个代码，但没有任何代码对我有用。 http://codepen.io/zepzia/pen/VPLKQx

HTML

<div class="container-fluid" id="projects">
  <div class="row" id="portfolio-row">
    <div class="col-sm-6 text-center project-portfolio" id="portfolio-title">
      <div>
        <h1>Div Title</h1>
      </div>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
      <div id="portfolio-code"><a href="#" target="_blank">view page</a>     </div>
    </div>
    <div class="col-sm-6 align-middle">
      <img class="center-block img-responsive laptop-portfolio" src="http://www.lapntab.com/Apple/4.jpg" alt="Portfolio Laptop">
    </div>
  </div>

CSS

.project-portfolio {
    height: 550px;
    background: repeating-linear-gradient(
  -45deg,
  #ffffff,
  #ffffff 2px,
  #e0e0e0 2px,
  #e0e0e0 4px
);
}

#portfolio-title h1 {
    margin-top: 175px;
    padding: 2px 10px;
    font-size: 70px;
    color: white;
    font-weight: 900;
    font-family: 'Raleway';
    background-color: #dbdbdb;
    display: inline-block;
}

#portfolio-title p {
    padding: 10px 10px 10px 10px;
    margin-top: -10px;
    margin-bottom: 0px;
    color: white;
    font-weight: 700;
    font-family: 'Raleway';
    font-size: 16px;
    background-color: #565656;
    display: inline-block;
}

#portfolio-code a {
    padding: 5px 10px;
    clear: left;
    background-color: #00c5ec;
    color: white;
    display: inline-block;
    font-family: 'Raleway';
    font-size: 12px;
    font-weight: bold;
}

.laptop-portfolio {
    max-height: 400px;

}

.align-middle {
   vertical-align: middle;
}

Answer 1

您可以这样使用：

.laptop-portfolio {
    display: inline-block;
    max-height: 400px;
}
.align-middle {
    height: 550px;
    text-align: center;
}
.align-middle:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

http://codepen.io/anon/pen/MJwbJv?editors=1100

Bootstrap Div

1 个答案: