vertical-align with Bootstrap 3

后端未结

关注

 25  2454

I\'m using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:

相关标签:

25条回答

-上瘾入骨i

2020-11-21 05:51

This is my solution. Just add this class to your CSS content.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Then your HTML would look like this:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

0 讨论(0)

感动是毒

2020-11-21 05:51

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

0 讨论(0)

一个人的身影

2020-11-21 05:53
I genuinely find the following code works using Chrome and not other browsers than the currently selected answer:
```
.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}
```
Bootply Link

You may need to amend the heights (specifically on .v-center) and remove/change div on div[class*='col-'] for your needs.
0 讨论(0)
发布评论:

提交评论
- 加载中...

耶瑟儿～

2020-11-21 05:56

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.

Demos link:
- Bootstrap 3
- Bootstrap 4 alpha 6

You still can use a custom class when you need it:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

Using inline-block adds extra space between blocks if you let a real space in your code (like ...</div> </div>...). This extra space breaks our grid if column sizes add up to 12:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Here, we've got extra spaces between <div class="[...] col-lg-2"> and <div class="[...] col-lg-10"> (a carriage return and 2 tabs/8 spaces). And so...

Enter image description here

Let's kick this extra space!!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Enter image description here

Notice the seemingly useless comments ? They are important -- without them, the whitespace between the <div> elements will take up space in the layout, breaking the grid system.

Note: the Bootply has been updated

0 讨论(0)

生来不讨喜

2020-11-21 05:56

There isn't any need for table and table-cells. It can be achieved easily using transform.

Example: http://codepen.io/arvind/pen/QNbwyM

Code:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

0 讨论(0)

执念已碎

2020-11-21 05:56
There are several ways you can do it:
1. Use
```
display: table-cell;
vertical-align: middle;
```
  and the CSS of the container to
```
display: table;
```
2. Use padding along with media-screen for changing the padding relative to the screen size. Google @media screen to know more.
3. Use relative padding
  
  I.e., specify padding in terms of %
0 讨论(0)
发布评论:

提交评论
- 加载中...

热议问题

vertical-align with Bootstrap 3

Bootply Link