My div "inner_submit_data" is vertically aligned on my page using the code below. However, if I include further HTML elements below this div they appear at the top of my page, as if they are ignoring the presence of the vertically aligned div. Is there a way for HTML elements appearing after the vertically-aligned div to display below it on my page? I will be adding a lot of dynamic content to my page so I don't think absolute positions is the answer.
Here is my HTML:
<div id="outer_submit_data">
<div id="inner_submit_data">
<h3 id="instruct">STEP #1: Upload your .csv file</h3>
<div class="init_buttons" id="upfile1"></div>
<br>
<div class="init_buttons" id="upfile2">Continue</div>
</div>
</div>
and CSS to make it align vertically:
#inner_submit_data {
/* POSITION */
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 40%;
margin: -10% 0 0 -20%;
/* DIV DISPLAY PROPERTIES*/
color: #fdf2e3;
font-family: verdana,arial,sans-serif;
}
Related
I want my text to be centered horizontally on the main part of the page, while behaving like the sidebar doesn't exist. I additionally also want it to be at the very bottom of the page.
#chat-form {
display: flex;
justify-content: center;
}
<section id="bottom-notice" style="position: absolute; bottom: 0px; width: 100%; background-color: red;">
<form id="chat-form">
<p style="color: #9a9a9e; font-size: 12px;">This text is the bane of my existence</p>
</form>
</section>
My idea was to have a parent div that would put it at the bottom with an absolute position, and to then
Have the child be centered horizontally like this, the justify-content centering it while respecting other divs.
However it behaves very weirdly and is too far on the right.
I can get the text to be centered respecting the sidebar and to be at the bottom, but never both at the same time.
Ive tried a bunch of stuff, but none of them brought me anywhere.
I think this will solve your problem. From the following code, your sidebar will be fixed on the left side and your text will remain on the bottom of the page without considering the position of the sidebar. For the demonstration purpose, I have written down HTML and CSS separately.
.container{
min-width:100%;
min-height:100%;
}
.sidebar{
position: fixed;
top:0;
left:0;
background-color: #000000;
color:#ffffff;
width:25%;
height:100%;
}
.text{
position: absolute;
bottom:0;
text-align:center;
width:100%;
}
<div class="container">
<div class="sidebar">My Sidebar</div>
<div class="text">
<p>This text is the bane of my existence</p>
</div>
</div>
How to create a layout that allows having a logo image(yellow) that spans 3 vertical div elements and does not change its location(center) when the page gets minimized. I'm using Bootstrap 4. Initially, I have found 2 solutions but they do not work when the page is resized by minimizing its size.
Using CSS style position: absolute and topY/offset - does not work because logo image(yellow) change its position..gray div goes under the pink div as a result the logo image overlaps the gray's div text content
Splitting the logo image horizontally into 3 images, the problem is that between the second(middle) image and the bottom image appears a lot of space when minimizing the page
NOTE: when the page gets minimized, the gray div goes under the pink div, and the green div goes under the gray div, as a result, the second row becomes twice taller. No problem that it is twice taller, but I want that the logo(yellow) to stay vertically centered in its original pink div
Place the 3 divs inside a wrapper
<style>
.wrapper{
background-image:url("image.jpg");
background-size:cover;
}
</style>
<div class="wrapper">
// three divs go here
</div>
This is possible through margin: negativevalue 0 -- but without actual code I can't give exact values. If standard Bootstrap 4, adding the class my-n5 (taking advantage of Bootstrap 4's spacing utility) to the logo element will make its box-model overlap others.
You need to use position: absolute, top: 50% and transform: translateY(-50%) to the logo to make it work
First, the position: absolute and top: 50% will make the logo position fixed in it's relative parent and make the top of the logo itself positioned in the center it's parent
Then the transform: translateY(-50%) will move the logo from the current position negatively for half of the logo height
Here's the working example
.c1 {
background: pink;
overflow: visible;
}
.c2 {
background: gray;
}
.c3 {
background: lightblue;
}
.logo {
width: 48px;
height: 48px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 100;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-12'>
1 DIV
</div>
</div>
<div class='row'>
<div class='col-md-4 c1'>
Left Content Logo
<img class='logo' src='https://upload.wikimedia.org/wikipedia/commons/d/d1/ShareX_Logo.png' />
</div>
<div class='col-md-3 c2'>
Mid Content
</div>
<div class='col-md-5 c3'>
Right Content
</div>
</div>
<div class='row'>
<div class='col-md-3' style='background: blue;'>
LEFT
</div>
<div class='col-md-6'>
MID
</div>
<div class='col-md-3'>
RIGHT
</div>
</div>
</div>
Note: You can try to resize either the div or the logo to see that it will still centered in it's relative parent container
Here is the result of the code below:
If I make the first image bigger then I have this one (The text goes far below the image) :
Now the question is:
How do I align each text and image horizontally?
(I want the text on the middle of the image not on the lower edge)
<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'>
<b>Diamonds: {valueY.value}</b>
</span><br>
<img src='https://via.placeholder.com/32x30' style='vertical-align:bottom; margin-right: 10px; width:32px; height:30px;'>
<span style='font-size:14px; color:#000000;'><b>Performance: {Performance}</span>
Just Convert the image vertical-align property from bottom to top.
It's better to divide your structure into divs that will make controlling of elements designs much easier.
To make the text horizontally centered comparing to the images you can make it's position absolutely & push it 50% from top and push it back of it's own height. So it will be vertically centered comparing to the left image/icon. Here is what I mean:
<div class="wrapper">
<img src='https://picsum.photos/200/300/?random'>
<span>
<b>Diamonds: {valueY.value}</b>
</span><br>
</div>
<div class="wrapper">
<img src='https://picsum.photos/200/300/?blur'>
<span>
<b>Performance: {Performance}</b>
</span>
</div>
I have wrapped each block within a div element so I can make the div position relatively.
Here is the css:
.wrapper { position: relative; }
img {
vertical-align: bottom; margin-right: 10px;
width:32px; height:30px;
}
span {
font-size:14px; color:#000000; display: inline-block;
position: absolute;
/* push it by 50% from top */
top: 50%;
/* push it back of it's own height */
transform: translateY(-50%);
}
Here is the live preview
I have a website where some teaser text and a button are presented on a background image.
grosso modo:
<div class="background">
<div class="teaser">
Teaser text
</div>
</div>
In an effort to make a website responsive, this teaser text and button should appear underneath the div rather on top, because the image makes it difficult to read on smaller print. How can I make this nested div appear underneath? I tried using position: relative but then it won't take up space below the div, overlapping other content.
You say you've tried position: relative... Have you tried position: absolute on the nested div?
.background {
background-image: url(http://s3.india.com/wp-content/uploads/2015/07/species1.jpg);
background-size: cover;
height: 400px;
width: 600px;
position: relative;
margin-bottom: 20px;
}
.teaser {
position: absolute;
bottom: -20px;
}
<div class="background">
<div class="teaser">
Teaser text
</div>
</div>
<div>
More content outside of teaser.
</div>
The teaser is position: absolute to its nearest position: relative parent (.background). I've position: it -20px from the bottom of background and added 20px of margin to the bottom of background as compensation so teaser doesn’t overlap other content.
<div style='height:200px;'>
SOME TEXT
</div>
how do i align "SOME TEXT" at the bottom of the div using CSS without padding?
The absolute easiest way, though not-exactly using your code example, would be:
div {height: 400px;
width: 50%;
margin: 0 auto;
background-color: #ffa;
position: relative;
}
div p {position: absolute;
bottom: 0;
left: 0;
right: 0;
}
html
<div id="container">
<p>SOME TEXT</p>
</div>
Wrap your text in an element, anything from <p>, <span>, <div>...whatever, and position that element at the bottom of its container.
You can't do it in a simple way, at least not cross browser.
You can use the display: table; vertical-align: center;
You can use JS/ CSS expressions.
You can have another element inside the div, and position it absolute in relation to the div:
<div style='position:relative;'>
<div style='position: absolute; bottom:0;>
My Text
</div>
</div>
But really, as much as I hate to say, Tables is the KISS here (if you need to veritcaly center it).
TDs can vertically align text with vertical-align, but this does not work on DIVs. It is not considered good style to use tables to vertically align elements.
You cannot vertical-align text within DIVs with CSS. You can only use padding, margin, or absolute and fixed positioning to align an text vertically.
If you use absolute positioning well, you can vertically align the text by vertically aligning a container that the text is in. However, absolutely positioned elements do not take up "space" within their container, which means you have to set a margin or padding to offset that space in the container.
Eg:
HTML:
<div id="container">
<span id="text">Some text, Some text, Some text, </span>
</div>
CSS:
#id {
position:relative;
margin-bottom: 100px;
}
#text {
position:absolute;
bottom:0;
height: 100px;
overflow:hidden;
}
# id{
display:table-cell;
vertical-align:bottom;
}
Using flex, supported in most recent browsers
div {
align-items: center;
background: red;
display: flex;
/* Uncomment to align it horizontally */
/* justify-content: center; */
}
<div style='height:200px;'>
SOME TEXT
</div>