I cannot seem to position text on the right side of this footer:
FIDDLE
Basically what happens is that I need the "center" class to keep the text vertically aligned on the footer, but using the "center" class and the "text-right" class (In bootstrap) will have the text messed up. If I only use the "text-right" class, the text is on the right, but way up top.
The CSS for .center is:
.center {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
Approach one - Bootstrap method (example):
Modified HTML:
<footer>
<div class="container-fluid">
<div class="row center">
<p class="col-xs-9">...</p>
<div class="col-xs-3 text-right">
...
</div>
</div>
</div>
</footer>
Basically, just added the container/row elements and use columns. Add your custom center class to the row element.
Approach two (example):
Set the display of the footer element to table, and then set the display of the children elements to table-cell and use vertical-align: middle for vertical centering.
footer {
background: #ECECEC;
width: 100%;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
display:table;
}
footer > p,
footer > div {
display:table-cell;
vertical-align:middle;
padding:20px;
}
Approach three (example):
Since the height of the footer is fixed, an arguably hackish solution would be to set a line-height with a value equal to the footer's height - in this case, 100px. You would also have to swap out text-right for pull-right/pull-left.
Approach four - using your custom center class (example):
.center {
margin: 0;
position: absolute;
top: 50%;
transform: translate(0, -50%);
width:100%;
}
Modified HTML:
<p class="text-left center">...</p>
<div class="text-right center"> ...
Are you using flex layout then this will be the perfect way and easiest way to do it
.center {
display: flex;
align-items: center;
justify-content: center;
}
Awesome read about centering text : https://webdesign.tutsplus.com/tutorials/how-to-create-perfectly-centered-text-with-flexbox--cms-27989
Related
I have a post grid layout that I'm trying to make responsive and am having some trouble figuring out the best approach for reorganising/reordering the content using CSS.
The original grid looks like this:
So an image on the left, that's the full height of the parent div (for which the recommendations are usually Flexbox or Absolute positioning), and then two rows in the second column for post content).
What I'm trying to figure out is the best way to code it so I can reorder the blocks to the layout below using CSS (i.e. keeping the HTML code/structure the same):
Essentially, I need to figure out the best way to move block 3 (the bottom "cell" in the second column) out of the second column and onto its own new row using CSS.
I've tried Flexbox, but can't make the structure work for both layouts. The first layout seems to require a nested column structure (the second column requiring its own div to dictate the flex-direction) and the second won't work if I have one (I can't "escape" the box 3 content from the column if it's hardcoded).
Same thing for a table layout, the HTML has to dictate what cell goes where/rows and columns.
The closest solution I have so far is three basic HTML divs, one on top of the other, and "absolute" positioning for box 1.
Basic HTML
<div class="container">
<div class="box-1">
<img=full-height-image>
</div>
<div class="box-2">
<post-title-and-meta>
</div>
<div class="box-3">
<post-excerpt-read-more>
</div>
</div>
Basic CSS (Desktop)
.container{
position: relative;
}
.box-1{
height: 100%;
position: absolute;
max-width: 33.333%;
}
.box-1 img{
height:100%;
object-fit:cover;
}
.box-2,
.box-3{
margin-left: 33.333%;
max-width: 66.666%;
}
Basic CSS (Responsive)
.container{
position: relative;
}
.box-1{
display: inline-block;
position: relative;
max-width: 33.333%;
}
.box-1 img{
height:100%;
object-fit:cover;
}
.box-2{
display: inline-block;
}
.box-3{
display:block;
margin-left:0;
max-width:100%;
}
But this doesn't seem like a particularly elegant/foolproof approach.
Based on what I need to do, and the "full height of parent div" image requirement, is there a better way to do this?
you can switch from a table display to a flex display (use mediaquerie to choose when to switch from a layout to another) .
absolute and object-fit can indeed be used for the image.
example of the idea :
div {
/* reset */
border: solid 1px;
box-sizing: border-box;
}
/* table-layout example , first box */
.container {
width: 80%;
margin: 0.25em auto;
display: table;
background: lightblue
}
.container .box-1 {
display: table-cell;/* no need to filter, once parent is flex, it doesn't matter*/
vertical-align: top;/* it won't disturb once a flex-child*/
width: 33%;
position: relative;
}
img {
position: absolute;
object-fit: cover;
height: 100%;
width: 100%;
}
div>div:last-child {
background: lightgreen
}
/* flex layout example, second box */
.bis {
display: flex;
flex-wrap: wrap;
}
.bis>div:nth-child(2) {
flex: 1;
background: tomato;
}
.bis>div:last-child {
min-width: 100%;
}
<div class="container">
<div class="box-1">
<img src=http://dummyimage.com/100>
</div>
<div class="box-2">
<h1>post-title-and-meta</h1>
</div>
<div class="box-3">
<p>post<br>excerpt</p>
<p>read-more</p>
</div>
</div>
<div class="container bis">
<div class="box-1">
<img src=http://dummyimage.com/100>
</div>
<div class="box-2">
<h1>post-title-and-meta</h1>
</div>
<div class="box-3">
<p>post<br>excerpt</p>
<p>read-more</p>
</div>
</div>
Is there a way to center vertically and horizontally everything automatically inside different container in the same page? I tried use top 50% and vertically-align, but it didn't work. I want to center vertically automatically because if the object/text change size, it will center exactly right place. I succeed center horizontally and I don't want to use top: px;. How do I do that using html5 and css? center everything automatically
no center
vertical-align will only align inline elements relative to each other. It will not work the way you want.
To align vertically just as you show in your image, you need to use display: flex; which has additional css properties which you may find useful.
basically you can use
position: absolute;
top: 50%;
transform: translate(-50%);
for vertical alignment.
But for this to work, the surrounding elements have to have either a fixed height, or if they have a percentage height, also their parent elements and all elements around these all the way up to the body element need to have percentage heights.
Here's an alternative solution that defines table properties for the DIVs. In a table cell the content can be centered not only horizontally, but also vertically (in class .x).
Codepen: http://codepen.io/anon/pen/WwjQZw
HTML:
<div class="wrap">
<div class="row_wrap">
<div class="head x">
ONE
</div>
</div>
<div class="row_wrap">
<div class="middle x">
TWO TWO
</div>
</div>
<div class="row_wrap">
<div class="bottom x">
THREE
</div>
</div>
</div>
CSS:
body {
font-size: 36px;
color: green;
}
.wrap {
display: table;
width: 100%;
}
.row_wrap {
display: table-row;
}
.x {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.head {
height: 200px;
background: #fa4;
}
.middle {
height: 400px;
background: #4af;
}
.bottom {
height: 100px;
background: #a4f;
}
I am trying to position a child DIV at the bottom of a parent DIV, but I would also like the contents of the child DIV to help dictate the dimensions of the parent DIV. As I have it right now, the child DIV doesn't affect the width/height of the parent DIV.
Here is a sample of my HTML/CSS code:
//HTML code:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child"></div>
</div>
//CSS code:
#parent {
background-color:#222;
position: relative;
height: 500px;
}
#child {
background-color:#444;
position: absolute;
bottom: 0px;
width: 100px;
height: 200px;
}
What do I need to do it achieve what I am trying to do? I could forgo the absolute/relative CSS rules and simply create a table within the parent DIV which would allow me to achieve both bottom alignment and content that dictates the parent's dimensions.
However, I'd like to know if there a way to do this in CSS and without having to set the width of the parent DIV.
thanks in advance!
The short answer is that what you are asking basically can't be done with pure CSS / HTML. (at least without tables) You'd need Javascript that would read #child's width/height and then do the calculation you want to do (I don't know) and set a new height/width to #parent.
Otherwise, if you mean that you want #child's height/width to change according to its content, of course this is native CSS, just set it's height/width to auto and then start adding text inside it you'll see it will start growing to fit your content inside.
As the #child is positioned absolute, then it is taken OUT of the normal flow of the document, therefore it will not affect the #parent.
With modern CSS, this is doable.
HTML:
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child">
<p>CHILD ELEMENT</p>
</div>
</div>
CSS:
#parent {
background:red;
height: 500px;
position:relative;
}
#child {
background:green;
position: absolute;
top:100%;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
width: 100px;
}
http://jsfiddle.net/Bushwazi/bpe5s6x3/
transform:translateY(-100%); is the trick. It's math is based on the element's box-model.
You could also combine top:50%; with transform:translateY(-50%); to center it.
You can swap top for left and translateY for translateX to position the element horizontally.
Here you go
HTML:
<main id="parent">
<div class="popup">Top Aligned Title
<div class="content">
Content
</div>
</div>
</main>
CSS:
#parent {
width: 120px;
}
.popup {
position: relative;
margin-top: 48px;
}
.content {
left: 0;
position: absolute;
background: green;
width: 100%;
}
http://jsfiddle.net/8L9votay/
You can play around with flex and zero-width/height.
I've recently come up with the following solution (for width):
#parent {
display: inline-flex;
flex-direction: column;
background: #518cff;
color: #fff;
}
#child-wrapper {
height: 0; /* This can also be max-height, but height is just enough */
}
#child {
transform: translateY(-100%); /* If you need to align child to the bottom */
background: #b40000;
color: #fff;
}
<div id="parent">
<h3>Top Aligned Title</h3>
<div id="child-wrapper"> <!-- This is the solution -->
<div id="child">
Child's content that is longer than parent's
</div>
</div>
</div>
The following code has a DIV that needs to be positioned at the top of the container, another at the bottom and then the content needs to come through in the middle.
<div style="position:absolute; top:0; width:100%; height:40px"></div>
<div class="howto"></div>
<div style="position:absolute; bottom:0; width:100%; height:40px"></div>
So we don't know the height of the containing DIV. How without JS can the div with class howto have the height of the container DIV less the height of the absolute positioned div at the top and bottom so as to contain content between these 2 DIVs.
For what you wish to accomplish, this is one possible solution:
#tinkerbin: http://tinkerbin.com/QsaCPgR6
HTML:
<div class="container">
<div class="header"></div>
<div class="howto">
Has height set to auto. You may change that if you want to.
</div>
<div class="footer"></div>
</div>
CSS:
.container {
position: relative;
padding: 40px 0; /* top and bottom padding = .header and .footer padding*/
}
.header,
.footer {
position: absolute;
height: 40px;
width: 100%;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
.howto {
height: /*specifiy one if you wish to*/;
}
As far as I know there isn't a pure CSS way to do what you're trying to do without JS.
See this previous post on SA:
Make a div fill the height of the remaining screen space
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 3 years ago.
I'm trying to make a small username and password input box.
I would like to ask, how do you vertically align a div?
What I have is:
<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
The best approach in modern browsers is to use flexbox:
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
Recommended Reading
Browser support
A Guide to Flexbox
Using CSS Flexible Boxes
This can be done with 3 lines of CSS and is compatible back to (and including) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Example: http://jsfiddle.net/cas07zq8/
credit
You can vertically align a div in another div. See this example on JSFiddle or consider the example below.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
The .innerDiv's margin must be in this format: margin: auto *px;
[Where, * is your desired value.]
display: inline-flex is supported in the latest (updated/current version) browsers with HTML5 support.
It may not work in Internet Explorer :P :)
Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.
I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.
You use the :before css attribute to insert a div into the beginning of the parent div, give it display:inline-block and vertical-align:middle and then give those same properties to the child div. Since vertical-align is for alignment along a line, those inline divs will be considered a line.
Make the :before div height:100%, and the child div will automatically follow and align in the middle of a very tall "line."
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Here's a fiddle to demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.
And here's a more explanatory fiddle.
If you're not fond of :before, you can always manually put in a div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
And then just reassign .parent:before to .parent .before
If you know the height, you can use absolute positioning with a negative margin-top like so:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Otherwise, there's no real way to vertically center a div with just CSS
In my firefox and chrome work this:
CSS:
display: flex;
justify-content: center; // vertical align
align-items: center; // horizontal align
I found this site useful: http://www.vanseodesign.com/css/vertical-centering/
This worked for me:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
#GáborNagy's comment on another post was the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:
CSS:
#wrapper {
display: table;
height: 150px;
width: 800px;
border: 1px solid red;
}
#cell {
display: table-cell;
vertical-align: middle;
}
HTML:
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>
If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:
#inner-cell{
width: 250px;
display: block;
margin: 0 auto;
}
Vertically aligning has always been tricky.
Here I have covered up some method of vertically aligning a div.
http://jsfiddle.net/3puHE/
HTML:
<div style="display:flex;">
<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>
<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>
<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>
<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>
</div>
CSS:
em{font-style: normal;font-weight: bold;}
.container {
width:200px;height:200px;background:#ccc;
margin: 5px; text-align: center;
}
.content{
width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}
http://jsfiddle.net/dvL512e7/
Unless the aligned div has fixed height, try using the following CSS to the aligned div:
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: table;
}
I needed to specify min-height
#login
display: flex
align-items: center
justify-content: center
min-height: 16em
if you are using fix height div than you can use padding-top according your design need.
or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.
simplest way to center your div element is to use this class with following properties.
.light {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Centering the child elements in a div. It works for all screen sizes
#parent {
background-color: red;
height: 160px;
display: flex;
/*vertical-align */
align-items: center;
/*horizontal align*/
justify-content: center;
}
#child {
background-color: orange;
height: 20px;
padding: 10px;
}
<div id="parent">
<div id="child">Content here</div>
</div>
I found a way that works great for me. The next script inserts an invisible image (same as bgcolor or a transparant gif) with height equal to half the size of the white-space on the screen. The effect is a perfect vertical-alignment.
Say you have a header div (height=100) and a footer div (height=50) and the content in the main div that you would like to align has a height of 300:
<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>");
</script>
You place the script just before the content that you want to align!
In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.
I therefore used:
var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));
Combine this script with
<body onResize="window.location.href = window.location.href;">
and you have a smooth vertical alignment.
Hope this works for you too!
have you try this one?
.parentdiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
height: 300px; // at least you have to specify height
}
hope this helps
divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.