In col-2, I am trying to center the "WHAT" text over the image.
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
As we resize the browser, the row height will change so that everything in col-10 fits. I am using object-fit:contain to keep the image proportions correct. I need the "stack-Txt" div to resize with the image so that the text will stay centered over the image
Or maybe you know of a better way to achieve this?
Current Idea:
Put WHAT in another child div, make flex, center text with justify-content/align-items
&
JS addEventListener to window resize, get the img div and set nextSibling size equal to this.
These were the css classes at some point... but the only important thing is that the img doesn't overflow the col-2 or the height (which is variable based on the length of col-10)
.stackParent {
position: relative;
object-fit: contain;
max-width: inherit;
height: 20vh;
}
.stack-Txt {
position: absolute;
text-align: center;
width: 100%;
max-height: 15vh;
min-height: 15vh;
z-index: 4;
}
.stack-Txt-child {
}
.stack-Img {
position: absolute;
object-fit: contain;
max-width: inherit;
min-height: 15vh;
max-height: 15vh;
top: 0%;
left: 0%;
z-index: 3;
}
*Note: I also have media queries to resize text, but this shouldn't make a difference.
If you are using Bootstrap 5 you can just use the built-in classes to achieve so.
Apply .position-relative to the main div parent
Apply .img-fluid to <img /> to make image responsive
Apply .position-absolute, .top-50, .start-50, translate-middle to stack-Txt to center it vertically and horizontally over the image.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent position-relative">
<img class="stack-Img img-fluid" src="https://source.unsplash.com/random">
<div class="stack-Txt position-absolute top-50 start-50 translate-middle">
<div class="fourWsText stack-Txt-child text-white">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
If you don't, just edit your CSS as follow:
.stackParent {
position: relative
}
/* make image responsive */
.stack-Img {
max-width: 100%;
height: auto;
}
.stack-Txt {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: white;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="https://source.unsplash.com/random">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
The text "what" is in center over the image in any screen resolution.
.stackParent{
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.stack-Img{
position: absolute;
margin: 0;
min-height: 15vh;
max-height: 15vh;
}
.stack-Txt{
z-index: 99;
}
<div class="row">
<div class="col-2">
<div class="stackParent">
<img class="stack-Img" src="img/base.png">
<div class="stack-Txt">
<div class="fourWsText stack-Txt-child">WHAT</div>
</div>
</div>
</div>
<div class="col-10">
...Variable length content...
</div>
</div>
Related
I have a picture that should be at 100% of the pc screen, but when I use 100vh the elements start to adapt and the elements roll off.
Using height: 100% makes the image too big and doesn't look like it was originally.
Is it possible to somehow get the value 100vh once, and then it would be unchanged?
.main_page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
<div class="main_page">
<!-- Black wallpaper-->
<div class="black_opacity">
<!-- Main wallpaper -->
<div class="main_wallpaper">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
<!-- Main wallpaper end -->
</div>
<!-- Black wallpaper end-->
<!-- Book-->
<div class="book_cover">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1046492404011782164/20221127_144830.png" alt="">
</div>
<div class="book_info">
<h1> name... </h1>
<h2> description...</h2>
</div>
<div class="button_div">
<button class="book_buttons" id="Buy"> buy at 2.50$</button>
<button class="book_buttons" onclick="read_click()"> Read book</button>
</div>
</div>
I've tried to use javascript, but I didn't get any response from html. It didn't take a screen value.
First of all, the class name in HTML is written as main_wallpaper but in CSS it's .main_page so you need to rename one of them so they match. There are a few ways you can achieve full height and screen. I like one of CSS-Tricks version of how to do this.
In the HTML:
<div class="main_wallpaper">
<img class="main_img" src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
In CSS:
.main_wallpaper {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.main_img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
I want to display 5 poker cards laid side by side with horizontal margin just like on a poker table. I tried this but I can't make it display:
I also want this to be responsive that is it preserves aspect ratio when resized.
.card {
width: 100%;
height: 100%;
background-size: cover;
}
.is2d .two.hearts {background-image:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4=')}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
As Armedin said, you do not have any content inside your div. Width and height 100% won't do anything.
I suggest you to put the image not as background, as it won't change the dimensions of the div. Use img tag and display: inline; for the card div.
.card {
width: 100%;
height: 100%;
background-size: cover;
display:inline;
}
<div class="poker is2d">
<div class="middle">
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"> <img src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9ImNhcmQiIGZhY2U9IjJIIiBoZWlnaHQ9IjMuNWluIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB2aWV3Qm94PSItMTIwIC0xNjggMjQwIDMzNiIgd2lkdGg9IjIuNWluIj48c3ltYm9sIGlkPSJTSDIiIHZpZXdCb3g9Ii02MDAgLTYwMCAxMjAwIDEyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaW5ZTWlkIj48cGF0aCBkPSJNMCAtMzAwQzAgLTQwMCAxMDAgLTUwMCAyMDAgLTUwMEMzMDAgLTUwMCA0MDAgLTQwMCA0MDAgLTI1MEM0MDAgMCAwIDQwMCAwIDUwMEMwIDQwMCAtNDAwIDAgLTQwMCAtMjUwQy00MDAgLTQwMCAtMzAwIC01MDAgLTIwMCAtNTAwQy0xMDAgLTUwMCAwIC00MDAgLTAgLTMwMFoiIGZpbGw9InJlZCI+PC9wYXRoPjwvc3ltYm9sPjxzeW1ib2wgaWQ9IlZIMiIgdmlld0JveD0iLTUwMCAtNTAwIDEwMDAgMTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaWQiPjxwYXRoIGQ9Ik0tMjI1IC0yMjVDLTI0NSAtMjY1IC0yMDAgLTQ2MCAwIC00NjBDIDIwMCAtNDYwIDIyNSAtMzI1IDIyNSAtMjI1QzIyNSAtMjUgLTIyNSAxNjAgLTIyNSA0NjBMMjI1IDQ2MEwyMjUgMzAwIiBzdHJva2U9InJlZCIgc3Ryb2tlLXdpZHRoPSI4MCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNSIgZmlsbD0ibm9uZSI+PC9wYXRoPjwvc3ltYm9sPjxkZWZzPjxyZWN0IGlkPSJYSDIiIHdpZHRoPSIxNjQuOCIgaGVpZ2h0PSIyNjAuOCIgeD0iLTgyLjQiIHk9Ii0xMzAuNCI+PC9yZWN0PjwvZGVmcz48cmVjdCB3aWR0aD0iMjM5IiBoZWlnaHQ9IjMzNSIgeD0iLTExOS41IiB5PSItMTY3LjUiIHJ4PSIxMiIgcnk9IjEyIiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSJibGFjayI+PC9yZWN0Pjx1c2UgeGxpbms6aHJlZj0iI1hIMiIgc3Ryb2tlPSIjODhmIiBmaWxsPSIjRkZDIj48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNWSDIiIGhlaWdodD0iMzIiIHg9Ii0xMTQuNCIgeT0iLTE1NiI+PC91c2U+PHVzZSB4bGluazpocmVmPSIjU0gyIiBoZWlnaHQ9IjI2Ljc2OSIgeD0iLTExMS43ODQiIHk9Ii0xMTkiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSI3MCIgeD0iLTM1IiB5PSItMTMxLjIzNCI+PC91c2U+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTgwKSI+PHVzZSB4bGluazpocmVmPSIjVkgyIiBoZWlnaHQ9IjMyIiB4PSItMTE0LjQiIHk9Ii0xNTYiPjwvdXNlPjx1c2UgeGxpbms6aHJlZj0iI1NIMiIgaGVpZ2h0PSIyNi43NjkiIHg9Ii0xMTEuNzg0IiB5PSItMTE5Ij48L3VzZT48dXNlIHhsaW5rOmhyZWY9IiNTSDIiIGhlaWdodD0iNzAiIHg9Ii0zNSIgeT0iLTEzMS4yMzQiPjwvdXNlPjwvZz48L3N2Zz4='/></div>
<div class="card two hearts"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
Edit: If you do not want to use img you can put the img to invisible and then use the background image as the div would still have the dimensions of the img tag inside. Not a good solution, but it would work.
Learn flex or grid; both very useful for things like this.
Flex example:
html, body {
height: 100%;
margin: 0;
}
.card {
border: 1px black solid;
border-radius: 15px;
flex-grow: 1;
padding: 5px;
margin: 5px;
}
.container {
display: flex;
height: 100%;
}
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
</div>
I want to create a web site that contains a network graph. I used vis.js for this. If you hover over an image of a person the image should flip and show some information on the background. I created a JavaScript file that creates a tree out of a json file dynamically. Here is a picture of the result:
As you can see the images are visible outside the box which should not be the case. They should not be displayed outside of the borders.
Here is my html-code:
<div id="fullpage">
<div class="section " id="section0">
...
</div>
<div class="section" id="section1">
...
</div>
<div class="section" id="section2">
<div class="intro">
...
</div>
<div id="media">
...
</div>
</div>
<div class="section active" id="section3">
<div class="slide" id="slide1">
<div id="network_container_1">
<div id="network"></div>
</div>
</div>
<div class="slide active" id="slide2">
<div id="network_container_2">
</div>
</div>
</div>
Here is the CSS:
#network{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
#network_container_bewohner{
width: 100%;
height: 100%;
left: 0;
top: 0;
border:1px black solid;
}
#network_container_freunde{
width: 100%;
height: 100%;
left: 0;
top: 0;
}
.overlay {
position: absolute;
padding: 4px;
z-index: 0;
}
#slide1{
z-index:0;
}
#slide2{
z-index:1;
}
The images are located as #block1, #block2, #block3, etc. as class overlay inside of #network_container_1.
As you can see I tried to mess around with the z-index but it doesn't work.
Okay I found the solution. The problem was the absolute position.
See here: Position absolute and overflow hidden
I am trying to have the image to scroll up and down within div.
Position sticky works when using chrome but not on IE, Edge, or firefox.
html
<section class="container">
<div class="row">
<div id="stamp-img" class="col-md-6">
<img src="">
</div>
<div class="col-md-6">
</div>
</div>
</section>
css
#stamp-img {
position: sticky;
top: 35%;
img {
margin: 50px 0px;
}
}
Why not use fixed? Sticky has cross browser compatibility issues as stated in the other answer.
#stamp-img {
/* changed to fixed */
position: fixed;
top: 35%;
/* new */
height: 100px;
overflow: auto;
/* end new */
img {
margin: 50px 0px;
}
}
<section class="container">
<div class="row">
<div id="stamp-img" class="col-md-6">
<img src="https://placehold.it/500x500">
</div>
<div class="col-md-6">
</div>
</div>
</section>
"the sticky property is an experimental API that should not be used in production code"
=> https://developer.mozilla.org/en-US/docs/Web/CSS/position
I'm building a site using fullpage.js and Foundation. I'm trying to vertically center an image inside of a section and I'm having no luck.
I've tried this:
https://css-tricks.com/centering-in-the-unknown/
I think that the issue has something to do with the fp-tableCell div that fullpage.js creates.
<div id="first-section" class="section sTop active">
<div id="first-section-row" class="row inner">
<div id="slide_1_wrapper" class="small-12 medium-6 columns">
<h1 class="title">Hello!</h1>
<h2 class="subtitle">My name is Whatever</h2>
</div>
<div id="main-picture-wrapper" class="small-12 medium-6 columns">
<img id="main-picture" src="img/headshot.jpg" alt="my_picture">
</div>
</div>
</div>
I tried the CSS from the article above with no luck:
#main-picture {
max-height: 400px;
}
#main-picture-wrapper {
display: inline-block;
vertical-align: middle;
}
#slide-1-wrapper {
position: relative;
}
#first-section:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
Screenshot of the rendered html, showing the fp-tableCell
try to add this in html
<div id="page">
<div id="content_container" class="small-12 medium-6 columns">
<div id="main-picture-wrapper">
<img id="main-picture" src="keyboard_search.png" alt="my_picture">
</div>
</div>
</div>
in css
*{ margin:0; padding:0;}
#page{display:table;overflow:hidden;margin:0px auto;}
#content_container{display:table-cell;vertical-align: middle;}
#main-picture-wrapper p{text-align:center;}
html,body{height:100%;}
#page{height:100%;width:100%; max-width:600px; text-align:center;}
.bannerimg{width:100%;max-width:600px;margin:0px auto;}
may help you
By default fullpage.js uses the option verticalCentered:true, so any image you add will be automatically centered unless you change it by using CSS.
You can easily see this in any demo online or in any of the provided examples.
From Michael in the comments:
Try giving the wrapper ID or class position: relative and then the image class or ID position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; - Rough Demo: jsfiddle.net/rrh5c04a