I need to align some buttons no matter how the content of previous elements changes. This is the markup that I currently have.
I currently have the buttons at the bottom not aligned as shown in the following image:
Notice that the buttons REQUEST DEMO are not properly aligned, so what I want is no matter the content in the previous p element is, they are aligned as shown in the following image:
Notice that here I used the same text to make it look aligned, but I want the buttons to be aligned no matter what the content of the text is.
I also need this functionality to be responsive since I am using bootstrap and for smaller screens, it shows two elements or one element per line.
I was thinking to add a min-height or max-height in the CSS, but this hasn't solved my problem.
Add this to your code and see if this is what you are looking for.
Documentation for flexbox
.row {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.col-md-6 {
flex: 1;
margin-right: 10px;
padding: 50px;
}
.btn {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
}
There's a few ways to do this. The easiest way would be using flexbox, here's a snippet example https://codepen.io/imohkay/pen/gpard
.parent {
display: flex;
justify-content: space-between;
}
Another way you could do it is having a fixed height for every column, and absolute position the button to the bottom and maybe add some padding to the content so the text never overlaps the button.
Add this class .btn-boxto the buttons and and this class .padbot to the box
CSS
.btn-box{
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%)
}
.padbot{
padding-bottom: 80px; // Adjust as your needs
}
DEMO HERE
Related
So I am trying to vertical align and horizontal a textbox span inside a parent div, the problem is it can valign or halign fine, not both. If it is a one line text it works fine, but if it is a long paragraph that takes multiple lines of the parent div, it does not vertical align.
.objprevicnt {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
width:inherit;
height:50px;
transform: translate(-50%, -50%);
}
also I am changing the text dynamically
document.getElementById("myid").innerHTML = 'some text';
so it should recenter as appropriate.
You would think this would be a simple thing, vertical and horizontal centering of a box inside another box, should work regardless of the size of text inside the box.
I think these CSS properties will work. Please try this.
#parent_div{
display:flex;
align-items:center;
direction:column;
}
#child_element{
display:flex;
align-self: center;
}
The easiest way to center an element inside a parent element would probably be using flexbox:
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
display: block;
}
I'm trying to get the button at the bottom of each div to align together to the other div.
I have tried using but it still can't work.
position:absolute;
bottom: 0;
This is my current work : https://www.bootply.com/NrkiUsvKa5
I'm trying to get to this result without calling break : https://www.bootply.com/gdP1LUvflA
As i noted in the comments, you can add a flexbox propperty to your row (i added it as a class in my example, see bootply link), and it will line out perfectly.
.flexbox-container {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
Check for the outcome here: https://www.bootply.com/iTaThCIrjb
For more documentation, read this article: https://davidwalsh.name/flexbox-column
Apply the flexbox and it wouldn't matter how long you would make your lines. This would render the awnser with a fixed height obsolete
Set the div to a fixed height and use:
#btn{
position: absolute;
bottom: 0;
left: 0;
}
Make relative the container div of the button and then give absolute position like below example.
<style>
.btnwrap { position:relative}
.btn { position:absolute; bottom:0}
</style>
<div class="btnwrap">
<a class="btn">Button</div>
</div>
I am creating a calendar and the header contains in it the names of the days of the week (su, mo...). The calendar itself scrolls while I want the header to stay fixed. This part has been simple enough using position fixed or making the calendar div contain the scroll bar.
The big issue I have is that I centered both the dates and the days of the week and the scrollbar is making the center different on the header and the content. The only workaround I found to this was to remove the scrollbar entirely, but I want the scrollbar to be visible. Is this possible?
Thanks in advance
.wrapper {
width: 100%;
.header {
position: fixed;
width: 100%;
.header-wrapper {
padding-left: 50%;
transform: translateY(-50%);
}
}
.content {
padding-left: 50%;
transform: translateY(-50%);
}
}
Here is a watered down example of my issue: https://jsfiddle.net/3hpj0s8L/
I gave the .wrapper a display: flex and justify-content: center to center all the child elements.
This makes the positioning of each child element with padding/margin and transform: translate, and even the width of the fixed element, obsolete.
Here is the updated JSFiddle demo.
I'm looking to center text both vertically and horizontally over an image that grows when the page gets wider.
I originally had the image set as the background for a div of fixed height, in which case it was relatively easy to center it, but because background images aren't structural, I couldn't set the height to be an automatic function of the width, and I had to toss this option out when I went for a more responsive design.
So I've currently got a div with two elements in it, img and overlay text. The image width is set to 100% of the width of its container, and the height varies accordingly. As a consequence, though, I can't set the overlay text to be postion:absolute and top:80px or something, because the distance from the top will have to vary. And even doing top:25% or whatever doesn't work, because a) if that page width shrinks to squeeze the text, or if there's just more text, the vertical centering is thrown off when there are more/less lines, and b) the percentage is arbitrary -- it's not 50 or something, because that would put the top of the text overlay 50% down the image, when I want the center of the overlay to be there.
I've looked, among other things, at this post, which is definitely close -- but in both solutions, the image height is incapable of resizing, and in the former, the JS loads at page load, but then freezes, so that if I change page width/height, things get out of whack. Ideally, this solution wouldn't involve JS for just that reason (even if it reloaded on every resize, that feels non-ideal), but if that's the only solution, I'll take it.
Also, just for added details/fun, I've set a max-height on the image, because I don't want it to exceed roughly 300px height, even on a cinema display.
Basic fiddle of current attempt here, and identical code below. Any ideas? Thanks!
html
<div class='quotation_div'>
<img src='http://www.mountainprofessor.com/images/mount-ranier-mount-features-2.jpg'>
<div class='overlay'>
<p>Any reasonable amount of text should be able to go here. I want it to be able to center vertically even if it takes up 2 or 3 lines.</p>
</div>
</div>
css
.quotation_div {
position: relative;
display: table;
}
img {
width: 100%;
max-height: 300px;
}
.overlay {
z-index: 99;
width: 70%;
margin-left: 15%;
vertical-align: middle;
position: absolute;
top: 25%; /* Obvious problem, cause it's arbitrary */
}
p {
text-align: center;
color: red;
font-size: 165%;
font-weight: lighter;
line-height: 2;
}
You can use CSS background-size to set the width to 100% and the height will be calculated to maintain aspect ratio.
Here's a fiddle using that technique.
If you want the image as an HTML element then I suggest you set it's position to absolute and use the same method of disply:table-cell to center the overlay:
Here's a fiddle using that method, this one stretches the image because of the max-height.
Please Try the below css for .overlay as in your fiddle
.overlay {
z-index: 99;
width: 70%;
/* height: 100%; */
/* margin-left: 15%; */
/* vertical-align: middle; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
or this is the updated fiddle link http://jsfiddle.net/hLdbZ/284/
I use this combination:
.CONTAINER {
position: relative;
text-align: center;
}
.TEXT {
text-align: center;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
.IMG {
//for responsive image
width: 100%;
height: auto;
}
I just added to the html
<div align="center"></div>
to surround your existing code to get the image to center
hope that helps
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)