bootstrap v3.3.6 - vertical align content in the bootstrap column
0
I using bootstrap v3.3.6 and trying to vertical align the 'My Link' in the middle. Is there any class available to achieve this?
Tried this, did not work for me vertical-align with Bootstrap 3
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4">
<a id="my-link">My link</a>
</div>
</div>
</li>
html css twitter-bootstrap vertical-alignment
edited Nov 21 '18 at 16:50
Foo
1
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
add a comment |
0
I using bootstrap v3.3.6 and trying to vertical align the 'My Link' in the middle. Is there any class available to achieve this?
Tried this, did not work for me vertical-align with Bootstrap 3
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4">
<a id="my-link">My link</a>
</div>
</div>
</li>
html css twitter-bootstrap vertical-alignment
edited Nov 21 '18 at 16:50
Foo
1
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
Put another DIV around your content in each col and give them both the same class. Use an Equal Heights JS script to make those divs be of equal heights. Use Flexbox to vertically align the link.
– Billy Moat
Nov 21 '18 at 16:47
add a comment |
0
0
0
I using bootstrap v3.3.6 and trying to vertical align the 'My Link' in the middle. Is there any class available to achieve this?
Tried this, did not work for me vertical-align with Bootstrap 3
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4">
<a id="my-link">My link</a>
</div>
</div>
</li>
html css twitter-bootstrap vertical-alignment
edited Nov 21 '18 at 16:50
Foo
1
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
I using bootstrap v3.3.6 and trying to vertical align the 'My Link' in the middle. Is there any class available to achieve this?
Tried this, did not work for me vertical-align with Bootstrap 3
<li class="list-group-item">
<div class="row">
<div class="col-md-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4">
<a id="my-link">My link</a>
</div>
</div>
</li>
html css twitter-bootstrap vertical-alignment
html css twitter-bootstrap vertical-alignment
edited Nov 21 '18 at 16:50
Foo
1
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
edited Nov 21 '18 at 16:50
Foo
1
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
edited Nov 21 '18 at 16:50
Foo
1
edited Nov 21 '18 at 16:50
Foo
1
edited Nov 21 '18 at 16:50
Foo
1
1
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
asked Nov 21 '18 at 16:31
Sunil SharmaSunil Sharma
448
448
Put another DIV around your content in each col and give them both the same class. Use an Equal Heights JS script to make those divs be of equal heights. Use Flexbox to vertically align the link.
– Billy Moat
Nov 21 '18 at 16:47
add a comment |
Put another DIV around your content in each col and give them both the same class. Use an Equal Heights JS script to make those divs be of equal heights. Use Flexbox to vertically align the link.
– Billy Moat
Nov 21 '18 at 16:47
Put another DIV around your content in each col and give them both the same class. Use an Equal Heights JS script to make those divs be of equal heights. Use Flexbox to vertically align the link.
– Billy Moat
Nov 21 '18 at 16:47
Put another DIV around your content in each col and give them both the same class. Use an Equal Heights JS script to make those divs be of equal heights. Use Flexbox to vertically align the link.
– Billy Moat
Nov 21 '18 at 16:47
add a comment |
2 Answers
2
active
oldest
votes
1
You can try to use display: table and display: table-cell.
.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>
</div>
</div>
</li>display: table needs a height: value property. Then, display: table-cell will use this height value with vertical-align: middle.
In this example, .col-xs-8 and .col-xs-4 have the same height value: 60px.
P/S: I've change .col-md-8 and .col-md-4 to .col-xs-8 and .col-xs-4 to fit the content on this site.
answered Nov 21 '18 at 16:47
FooFoo
1
Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share.
– Sunil Sharma
Nov 21 '18 at 17:17
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (table) need a height value which is used by the content (cell). If you nest a lot ofdivtag insided-table-cell. This code must be edited.
– Foo
Nov 21 '18 at 17:27
add a comment |
0
Another alternative for vertically centering is using the CSS display: flex; property in conjunction with align-items: center;. You can check the next example.
.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>For vertically centering, parent elements needs to have a defined height, that is the purpose of the class fixed-h you see on the styles. Also I have made, as reference, the horizontal centering for flex mode: hcenter-flex. Finally, background colors are just apply to have reference of the containers limits.
answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416577%2fbootstrap-v3-3-6-vertical-align-content-in-the-bootstrap-column%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can try to use display: table and display: table-cell.
.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>
</div>
</div>
</li>display: table needs a height: value property. Then, display: table-cell will use this height value with vertical-align: middle.
In this example, .col-xs-8 and .col-xs-4 have the same height value: 60px.
P/S: I've change .col-md-8 and .col-md-4 to .col-xs-8 and .col-xs-4 to fit the content on this site.
answered Nov 21 '18 at 16:47
FooFoo
1
Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share.
– Sunil Sharma
Nov 21 '18 at 17:17
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (table) need a height value which is used by the content (cell). If you nest a lot ofdivtag insided-table-cell. This code must be edited.
– Foo
Nov 21 '18 at 17:27
add a comment |
1
You can try to use display: table and display: table-cell.
.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>
</div>
</div>
</li>display: table needs a height: value property. Then, display: table-cell will use this height value with vertical-align: middle.
In this example, .col-xs-8 and .col-xs-4 have the same height value: 60px.
P/S: I've change .col-md-8 and .col-md-4 to .col-xs-8 and .col-xs-4 to fit the content on this site.
answered Nov 21 '18 at 16:47
FooFoo
1
Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share.
– Sunil Sharma
Nov 21 '18 at 17:17
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (table) need a height value which is used by the content (cell). If you nest a lot ofdivtag insided-table-cell. This code must be edited.
– Foo
Nov 21 '18 at 17:27
add a comment |
1
1
1
You can try to use display: table and display: table-cell.
.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>
</div>
</div>
</li>display: table needs a height: value property. Then, display: table-cell will use this height value with vertical-align: middle.
In this example, .col-xs-8 and .col-xs-4 have the same height value: 60px.
P/S: I've change .col-md-8 and .col-md-4 to .col-xs-8 and .col-xs-4 to fit the content on this site.
answered Nov 21 '18 at 16:47
FooFoo
1
You can try to use display: table and display: table-cell.
.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>
</div>
</div>
</li>display: table needs a height: value property. Then, display: table-cell will use this height value with vertical-align: middle.
In this example, .col-xs-8 and .col-xs-4 have the same height value: 60px.
P/S: I've change .col-md-8 and .col-md-4 to .col-xs-8 and .col-xs-4 to fit the content on this site.
.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>
</div>
</div>
</li>.col-xs-8, .col-xs-4 {
height: 60px;
}
.d-table {
display: table;
height: 100%;
}
.d-table-cell {
display: table-cell;
}
.align-middle {
vertical-align: middle;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<li class="list-group-item">
<div class="row">
<div class="col-xs-8">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-xs-4">
<div class="d-table">
<div class="d-table-cell align-middle">
<a id="my-link">My link</a>
</div>
</div>
</div>
</div>
</li>answered Nov 21 '18 at 16:47
FooFoo
1
answered Nov 21 '18 at 16:47
FooFoo
1
answered Nov 21 '18 at 16:47
FooFoo
1
answered Nov 21 '18 at 16:47
FooFoo
1
1
Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share.
– Sunil Sharma
Nov 21 '18 at 17:17
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (table) need a height value which is used by the content (cell). If you nest a lot ofdivtag insided-table-cell. This code must be edited.
– Foo
Nov 21 '18 at 17:27
add a comment |
Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share.
– Sunil Sharma
Nov 21 '18 at 17:17
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (table) need a height value which is used by the content (cell). If you nest a lot ofdivtag insided-table-cell. This code must be edited.
– Foo
Nov 21 '18 at 17:27
Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share.
– Sunil Sharma
Nov 21 '18 at 17:17
Tan Nguyen thanks for your reply. This solution works when I run in separate file. When I added to my actual code file, it did not work, I think some other code is interfering with styles. I will try to debug. Try to find if anything else I can share.
– Sunil Sharma
Nov 21 '18 at 17:17
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (
table) need a height value which is used by the content (cell). If you nest a lot of div tag inside d-table-cell. This code must be edited.– Foo
Nov 21 '18 at 17:27
@SunilSharma If it is small enough to check, sure, we can help. Otherwise, if your code is too big, it needs a lot of time to check for per item. My example is still right in the rule: the main container (
table) need a height value which is used by the content (cell). If you nest a lot of div tag inside d-table-cell. This code must be edited.– Foo
Nov 21 '18 at 17:27
add a comment |
0
Another alternative for vertically centering is using the CSS display: flex; property in conjunction with align-items: center;. You can check the next example.
.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>For vertically centering, parent elements needs to have a defined height, that is the purpose of the class fixed-h you see on the styles. Also I have made, as reference, the horizontal centering for flex mode: hcenter-flex. Finally, background colors are just apply to have reference of the containers limits.
answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
add a comment |
0
Another alternative for vertically centering is using the CSS display: flex; property in conjunction with align-items: center;. You can check the next example.
.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>For vertically centering, parent elements needs to have a defined height, that is the purpose of the class fixed-h you see on the styles. Also I have made, as reference, the horizontal centering for flex mode: hcenter-flex. Finally, background colors are just apply to have reference of the containers limits.
answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
add a comment |
0
0
0
Another alternative for vertically centering is using the CSS display: flex; property in conjunction with align-items: center;. You can check the next example.
.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>For vertically centering, parent elements needs to have a defined height, that is the purpose of the class fixed-h you see on the styles. Also I have made, as reference, the horizontal centering for flex mode: hcenter-flex. Finally, background colors are just apply to have reference of the containers limits.
answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
Another alternative for vertically centering is using the CSS display: flex; property in conjunction with align-items: center;. You can check the next example.
.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>For vertically centering, parent elements needs to have a defined height, that is the purpose of the class fixed-h you see on the styles. Also I have made, as reference, the horizontal centering for flex mode: hcenter-flex. Finally, background colors are just apply to have reference of the containers limits.
.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>.fixed-h {
height: 100px;
}
.vcenter-flex {
display: flex;
align-items: center;
}
.hcenter-flex {
display: flex;
justify-content: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<li class="list-group-item">
<div class="row">
<div class="col-md-8 fixed-h bg-info">
<b>Some Title</b>
<br>
Some details some details some details some details
</div>
<div class="col-md-4 fixed-h vcenter-flex hcenter-flex bg-warning">
<a id="my-link">My link</a>
</div>
</div>
</li>answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
edited Nov 21 '18 at 20:31
answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
answered Nov 21 '18 at 20:18
ShiderszShidersz
6,2972830
6,2972830
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416577%2fbootstrap-v3-3-6-vertical-align-content-in-the-bootstrap-column%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Put another DIV around your content in each col and give them both the same class. Use an Equal Heights JS script to make those divs be of equal heights. Use Flexbox to vertically align the link.
– Billy Moat
Nov 21 '18 at 16:47