This question already has answers here:
Vertical Align Center in Bootstrap 4 [duplicate]
(20 answers)
Vertical alignment in Bootstrap 4
(2 answers)
Closed 5 years ago.
http://jsfiddle.net/m9121mxt/
This is my case. I want the button to stay in the center of viewmorebutton element. I tried margin:auto; and text-align: center; but they doesn't work. How can I center align the button in the middle vertically?
Thanks!
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--facebook icon-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.thirdpage{
height: 90vh;
background-color: #101427;
}
.thirdoutter{
position: relative;
margin: 0 auto;
width: 80%;
height: 100%;
}
.viewmorebutton{
margin:auto;
height: 80%;
text-align: center;
}
</style>
<div class="thirdpage">
<div class="thirdoutter">
<div class="viewmorebutton">
<button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
</div>
</div>
</div>
If you just add the classes d-flex align-items-center justify-content-center to the div around your button, then you don't need any custom css because those Bootstrap 4 classes will do the job. After all, since you are loading Bootstrap 4 anyway, you might as well use it.
Here's the working code snippet (click the "run code snippet" button below):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.thirdpage{
height: 90vh;
background-color: #101427;
}
.thirdoutter{
position: relative;
margin: 0 auto;
width: 80%;
height: 100%;
}
.viewmorebutton{
margin:auto;
height: 100%;
text-align: center;
}
</style>
<div class="thirdpage">
<div class="thirdoutter">
<div class="viewmorebutton d-flex align-items-center justify-content-center">
<button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
</div>
</div>
</div>
One way to center items inside a div is set display to table to your .thirdoutter and display table-cell to the .viewmorbutton
.thirdpage{
height: 90vh;
background-color: #101427;
}
.thirdoutter{
display: table;
position: relative;
margin: 0 auto;
width: 80%;
height: 100%;
}
.viewmorebutton{
display: table-cell;
vertical-align: middle;
text-align: center;
margin:auto;
height: 80%;
}
.largercavas{
height: 100%;
width: 50%;
object-fit: cover;
}
.largerimg{
width: 100%;
max-height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="thirdpage">
<div class="thirdoutter">
<div class="viewmorebutton">
<button type="button" class="btn btn-secondary col-sm-4">VIEW MORE</button>
</div>
</div>
</div>
You have given .thirdoutter a position of relative, which is needed to make it an absolute container for .viewmorebutton
.viewmorebutton {
position: absolute;
top: 50%;
transform: translate(0, -50%) }
position: absolute will be in relation to its parent container
top: 50% will vertically centre item
transform: translate (0, -50%) will move the item itself up by half its own height to fully centre it
Related
I'm working on a Web GIS, and I just learned about JavaScript and Bootstrap.
I want to make a website with 2 columns for text and map (col-4 and col-8). However, col-8 don't display the whole map, and I should scroll to the right and below to see more map. Also, the right-side map looks more extended than the navbar. I've tried to edit the style but it still doesn't work. Here's my html and css code:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-4">
<div>
<h3> About Jakarta Landmark Markers Map</h3>
</div>
</div>
</body>
<link rel="stylesheet" href="./leaflet/leaflet.css">
<div class="col-8">
<body>
<div id="map"></div>
<!-- <script src="index.js"></script>
<script src="./leaflet.ajax.js"></script> -->
</div>
</body>
</html>
CSS
.navbar{
padding: 20px 20px 10px 10px;
background-color: #28a7e9;
transition: all ease 0.4s;
position: relative;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
#map {
flex: 1;
width: 100%;
height: 360px;
position: absolute;
margin:0;
padding:0;
}
The image is fine if it's not full screen, but with full screen, there's a white area on the right (probably because the image is not large enough). How do I make the image automatically stretch so that its width covers the full screen?
CSS (see .landingImage):
.body {
margin: 0px, 50px;
}
.home {
margin-left: 20px;
margin-right: 20px;
padding: 5px 5px;
}
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
margin: 0 auto;
width: 100vw;
}
index.js(built using nextjs):
<Head>
...
</Head>
<div id="wrapper">
<Image className={indexStyles.landingImage} src={orcas} />
</div>
<div className={indexStyles.home}>
<Head>
<meta
name="viewport"
content="width=device-width, initial-scale=1"
></meta>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
></link>
</Head>
<body>
...
</body>
</div>
tried width: 100% also didn't work
from the doc
When using layout='fill', the parent element must have position:
relative
This is necessary for the proper rendering of the image element in
that layout mode.
What can you do is :
CSS :
add relative to the landingImage class and remove margin auto
.landingImage {
z-index: 0;
background-size: cover;
top: 0;
padding: 0;
display: block;
width: 100vw;
position: relative;
}
Wrap Image on the div
<div className='landingImage '>
<Image
layout='fill' // required
objectFit='cover' // change to suit your needs
src='orcas' //
/>
</div>
I want the overlay div to take full container width (col-md-12). Now of course, it's only taking up col-md-4 width which is it's parent.
$(document).ready(function() {
$('button').click(function() {
$('#overlay').toggleClass('active');
// calcs bottom of button
var bottom = $(this).position().top + $(this).outerHeight(true);
$('#overlay').css({
'top': bottom + 'px',
});
});
$('#close').click(function() {
$('#overlay').removeClass('active');
});
});
#overlay {
z-index: 10;
margin-left: 15px;
position: absolute;
width: 100%;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
}
#overlay.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
Set position: static; to .col-md-4 and position: relative; to .container
$(document).ready(function() {
$('button').click(function() {
$('#overlay').toggleClass('active');
// calcs bottom of button
var bottom = $(this).position().top + $(this).outerHeight(true);
$('#overlay').css({
'top': bottom + 'px',
});
});
$('#close').click(function() {
$('#overlay').removeClass('active');
});
});
#overlay {
z-index: 10;
margin-left: 15px;
position: absolute;
width: 100%;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
}
#overlay.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.container {
position: relative;
}
.col-md-4 {
position: static;
}
</style>
<div class=container>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
Try this I think this may work for you. Am not sure because your Q is not that much clear.I have removed margin-left: 15px as you have put left:0; at the bottom.
#overlay {
z-index: 10;
position: absolute;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
right:0;/*Added right attribut to make width 100%*/
top: 0;/*Added top attribut to make your div attach to the top of the parent div*/
}
#overlay.active {
display: inline-block;
}
This will only work if the parent of the #overlay is positioned as relative(position: relative;) because the absolute position div always depend on its relative parent if there is none then it will align according to the HTML Page.
How about adding overlay as sibling to row
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
find bellow code (HTML/CSS) that I´m trying to move a specific DIV but not able to - note that I used Bootstrap
HTML - The issue is with the div id "PlayerMain" that is unable to move to the page center
body {
background-image: url('../images/dis_bg.png');
background-repeat: no-repeat;
text-align: center;
align-content: center;
}
.whiteBorder {
display: inline;
background-color: white;
}
.allPage {
text-align: center;
}
.blueFont {
color: blue;
}
#efi {
max-width: 100%;
height: auto;
display: block;
position: absolute;
bottom: 20%;
top: 20%;
right: 10%;
z-index: 30;
}
.h1Border {
width: 1500px;
background-color: white;
border: none;
}
.loginButtonImg {
margin-top: 10px;
}
.loginButtonImg:hover {
cursor: pointer;
}
#media (max-width: 768px) {
.mobile-only {
display: none !important;
}
}
<script src="SCRIPT/JS/site.js"></script>
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
<link href="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="stylesheet" />
<link href="CSS/site.css" rel="stylesheet" />
<script src="SCRIPT/Jquery/jquery-3.1.1.js"></script>
<script src="SCRIPT/JS/site.js"></script>
<script src="SCRIPT/Bootsrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<div class="container-fluid">
<div class="row whiteBorder">
<section class="col-xs-12">
<div>
<h1 class="blueFont">דודי,<br /> text, <br /><b>text</b>text</h1>
</div>
</section>
<section class="col-xs-12">
<div>
<img src="images/efi.png" id="efi" class="mobile-only center-block" />
<div id="treepodiaPlayerMain" class="center-block"></div>
</div>
<img src="images/login.png" class="img-responsive center-block loginButtonImg" />
</section>
</div>
<section class="row">
<div class="col-xs-12">
<img src="images/bottom_icons.png" class="img-responsive center-block" />
</div>
</section>
</div>
<script type="text/javascript" src="//someScript.js"></script>
Many thanks in advance!
I show you snippet just remove position: absolute; from css where you write id #efi. and check it again
I know there are a lot of questions on z-index around here, but I am using z-index for a while now and it always worked fine, but now I'm struggling on this one and I just don't understand why it isn't working because I think I did all necessary steps.
test.html
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js " type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.boxGrid').hover(function(){
$(".boxCaption", this).stop().animate({bottom:'0px'},{queue:false,duration:300});
}, function() {
$(".boxCaption", this).stop().animate({bottom:'-121px'},{queue:false,duration:300});
});
});
</script>
</head>
<body>
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid">
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.boxGrid
{
width: 226px;
height: 246px;
background-image: url(buttonBorder.png);
position: absolute;
top: 0px;
left: 0px;
z-index: 100;
}
.buttonBack
{
position: absolute;
top: 12px;
left: 13px;
border: 0px;
width: 200px;
height: 223px;
z-index: 50;
overflow: hidden;
}
.blogImg
{
background-image: url(blogButton.png);
}
.boxCaption
{
position: absolute;
background: url(caption.png);
height: 121px;
width: 100%;
bottom: -121px;
text-align: center;
}
.boxCaption h3
{
font-size: 30px;
color: #fff;
}
So I want this .boxGrid class to be above the .buttonBack class, I added position: properties to all div's that are using z-index.
JsFiddle so the red box needs to be behind the blue one.
Thanks in advance
You can't "hide" child element under its parent, because when you're setting z-index for parent, the child is also affected. Just make them siblings.
<div style="position: relative; width: 226px; height: 246px;">
<div class="boxGrid"></div>
<div class="buttonBack blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>
Look at this jsfiddle: http://jsfiddle.net/ZwC9n/
You have the div.buttonBack as a child to the div.boxGrid. You may need to reorder the HTML.
<div style="position: relative; width: 226px; height: 246px;">
<div class="buttonBack></div>
<div class="boxGrid">
<div blogImg">
<div class="boxCaption">
<h3>Top-Blog</h3>
</div>
</div>
</div>