问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在中间垂直对齐div？

社区维基
1
新手上路，请多包涵

我用 bootstrap 3 创建了这一行：

 <div class="cart">
<div class="row border">
  <div class="col-md-8 desc pad itemsheight">
    <div class="col-md-12">
      <!-- react-text: 141 -->Docos
      <!-- /react-text -->
      <!-- react-text: 142 -->channel package
      <!-- /react-text -->
    </div>
    <div class="col-md-12 small"><a href="">Change</a>
      <!-- react-text: 145 -->|
      <!-- /react-text --><a href="">Remove</a></div>
  </div>
  <div class="col-md-2 desc grey pad itemsheight"></div>
  <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div>
</div>
  </div>

问题是文本没有在中间垂直对齐。我尝试使用垂直对齐但不起作用？这是另一个示例： http ://codepen.io/gekkerkanniet/pen/jVKoyR

原文由 bier hier 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcsstwitter-bootstrap-3
阅读 205
2 个回答
得票最新
社区维基
1
✓ 已被采纳

我使用 flex display 来垂直对齐内容。

 .vCenterItems {
    display: flex;
    align-items: center;
}

还从每个单独的元素中删除了高度并仅应用于父元素。这将更容易改变高度。

看看它的实际效果

原文由 Sen Jacob 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

试试这个，也许这会对你有帮助

 /*************Cart******************/
.center-block {
   margin-left:auto;
   margin-right:auto;
   display:block;
}
// in case your dealing with a inline element apply this to the parent
.text-center {
   text-align:center
}
.children{


    position: relative;
    top: 35%;
    transform: translateY(-50%);
}

.cart .pad {
  margin-top: 8px;
  padding: 2px;
}
.cart .padheader {
  padding: 17px;
}
.cart .border {
  border: solid 0.5px;
}

.cart .right {
  text-align: right;
}
.cart .costs {
  padding: 2px;
  margin-top: 10px;
}
.cart .medium {
  font-size: 24px;
  line-height: 53px;
}
.cart .small {
  font-weight: bold;
  font-size: 14px;
}
.cart .itemsheaderheight {
  height: 68px;
}
.cart .itemsheight {
  height: 97px;
}
.cart .space {
  padding: 17px;
}
.cart .grey {
  background-color: #f7f7f7;
}
.cart .yourorder {
  font-family: "Helvetica";
  font-size: 24px;
  font-weight: 300;
  text-align: left;
  color: #333333;
}
.cart .price {
  font-family: Helvetica;
  font-size: 40px;
}
.cart .desc {
  font-size: 16px;
  font-weight: bold;
}
.cart .border-bottom {
  border-bottom: lightgray solid 0.5px;
}
.cart .border-top {
  border-top: lightgray solid 0.5px;
}
.cart .collapse {
  display: none;
}
.cart .collapse.in {
  display: block;
}

 <!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>A Pen by  Derk Ingen</title>


  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <div class="cart">
<div class="row border">
  <div class="col-md-8 desc pad itemsheight center-block">
    <div class="col-md-12 text-center children">
      <!-- react-text: 141 -->Docos
      <!-- /react-text -->
      <!-- react-text: 142 -->channel package
      <!-- /react-text -->
    </div>
    <div class="col-md-12 small text-center children"><a href="">Change</a>
      <!-- react-text: 145 -->|
      <!-- /react-text --><a href="">Remove</a></div>
  </div>
  <div class="col-md-2 desc grey pad itemsheight"></div>
  <div class="col-md-2 dollar grey price middle space pad itemsheight">15</div>
</div>
  </div>


</body>
</html>

原文由 Ganesh Putta 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题