How to verticvally align center icons in bootstrap col?
0
Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
css twitter-bootstrap
asked Jan 3 at 19:51
huxihuxi
183
add a comment |
0
Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
css twitter-bootstrap
asked Jan 3 at 19:51
huxihuxi
183
Addingdisplay: flex; align-items:centerto the parent will work. You can do it using CSS or Bootstrap classes. Do note that any vertically centered content, if it has unequal top and bottom margins or paddings, will appear not centered. So make sure that<h1>has equal top and bottom margins and paddings. Last, but not least,aling-self-centerhas no effect if the parent doesn't have a flexbox value fordisplay(flexorinline-flex).
– Andrei Gheorghiu
Jan 3 at 20:02
add a comment |
0
0
0
Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
css twitter-bootstrap
asked Jan 3 at 19:51
huxihuxi
183
Using bootstrap 4 inside Vue.js, I'd like to make left and right arrows to appear at the middle of the page around the image.
Here is the code:
<div class="row">
<div class="col-1">
<span class="align-self-center"><h1>❮</h1></span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="align-self-center"><h1>❯</h1></span>
</div>
</div>
But whatever I tamper with CSS, I can not acheive this. How can I fix this?
css twitter-bootstrap
css twitter-bootstrap
asked Jan 3 at 19:51
huxihuxi
183
asked Jan 3 at 19:51
huxihuxi
183
asked Jan 3 at 19:51
huxihuxi
183
asked Jan 3 at 19:51
huxihuxi
183
asked Jan 3 at 19:51
huxihuxi
183
183
Addingdisplay: flex; align-items:centerto the parent will work. You can do it using CSS or Bootstrap classes. Do note that any vertically centered content, if it has unequal top and bottom margins or paddings, will appear not centered. So make sure that<h1>has equal top and bottom margins and paddings. Last, but not least,aling-self-centerhas no effect if the parent doesn't have a flexbox value fordisplay(flexorinline-flex).
– Andrei Gheorghiu
Jan 3 at 20:02
add a comment |
Addingdisplay: flex; align-items:centerto the parent will work. You can do it using CSS or Bootstrap classes. Do note that any vertically centered content, if it has unequal top and bottom margins or paddings, will appear not centered. So make sure that<h1>has equal top and bottom margins and paddings. Last, but not least,aling-self-centerhas no effect if the parent doesn't have a flexbox value fordisplay(flexorinline-flex).
– Andrei Gheorghiu
Jan 3 at 20:02
Adding
display: flex; align-items:center to the parent will work. You can do it using CSS or Bootstrap classes. Do note that any vertically centered content, if it has unequal top and bottom margins or paddings, will appear not centered. So make sure that <h1> has equal top and bottom margins and paddings. Last, but not least, aling-self-center has no effect if the parent doesn't have a flexbox value for display (flex or inline-flex).– Andrei Gheorghiu
Jan 3 at 20:02
Adding
display: flex; align-items:center to the parent will work. You can do it using CSS or Bootstrap classes. Do note that any vertically centered content, if it has unequal top and bottom margins or paddings, will appear not centered. So make sure that <h1> has equal top and bottom margins and paddings. Last, but not least, aling-self-center has no effect if the parent doesn't have a flexbox value for display (flex or inline-flex).– Andrei Gheorghiu
Jan 3 at 20:02
add a comment |
1 Answer
1
active
oldest
votes
0
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
answered Jan 3 at 20:09
huxihuxi
183
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%2f54028898%2fhow-to-verticvally-align-center-icons-in-bootstrap-col%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
answered Jan 3 at 20:09
huxihuxi
183
add a comment |
0
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
answered Jan 3 at 20:09
huxihuxi
183
add a comment |
0
0
0
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
answered Jan 3 at 20:09
huxihuxi
183
Well, thanks to this answer, I realized it can be done with minimal fuss, by adding a simple flex css:
.img-box {
display: flex;
align-items:center;
}
And don't forget to add img-box class:
<div class="row img-box">
<div class="col-1">
<span class="nav-arrow">❮</span>
</div>
<div class="col-9">
<h1>Modal comes here</h1>
<img class="img-fluid modal-img" :src=" getImgUrl(currentMediaUrl)">
</div>
<div class="col-1">
<span class="nav-arrow">❯</span>
</div>
</div>
answered Jan 3 at 20:09
huxihuxi
183
answered Jan 3 at 20:09
huxihuxi
183
answered Jan 3 at 20:09
huxihuxi
183
answered Jan 3 at 20:09
huxihuxi
183
183
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%2f54028898%2fhow-to-verticvally-align-center-icons-in-bootstrap-col%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
Adding
display: flex; align-items:centerto the parent will work. You can do it using CSS or Bootstrap classes. Do note that any vertically centered content, if it has unequal top and bottom margins or paddings, will appear not centered. So make sure that<h1>has equal top and bottom margins and paddings. Last, but not least,aling-self-centerhas no effect if the parent doesn't have a flexbox value fordisplay(flexorinline-flex).– Andrei Gheorghiu
Jan 3 at 20:02