I am vertically aligning a div using Michał Czernow's technique posted on CSS Tricks:
HTML
<div class="block">
<div class="centered">
Unknown stuff to be centered.
</div>
</div>
CSS
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
http://css-tricks.com/centering-in-the-unknown/
This method works perfectly, however, if I have content that exceeds the height of the browser window, the content breaks outside of its div.
My question is this. Is there a way to keep height: 100%, but make height: auto for divs that exceed the browser height (if possible without js)?
Thanks in Advance!
min-height:100%? Seems like a simple solution unless I'm missing something.
Related
I'm trying to centralize images (both x and y axis) in a container in bootstrap. When I was working in non-responsive designs, I would just used this method:
.container{display:table-cell; vertical-align:middle; text-align:center; width:500px; height:300px;}
.container img{display:block; margin:auto;}
It worked fine but I can't use this method in bootstrap because the height of the container is not constant. So how can I centralize images in bootstrap?
When the height of the object you want to center and/or the container are unknown, you can use this trick from csstrick. In short, we introduce a pseudo element as follows:
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
I have a parent div (for sake of test we'll call it #parent) and a child div (test reasons #child). #parent is absolutely positioned to the bottom of the page, with a fixed width of 100% and a height of 75px.
child is a div that holds dynamic content (being changed with jQuery). Seeing as it is dynamic, the width of the div is always different. What is the most efficient way to center this div horizontally, since the width is always unknown & different? Any help would be awesome.
The correct way to do this would be the following:
#child {
margin: 0 auto;
}
This sets the top/bottom margins to 0, and then the left/right margins to auto - which means "as large as possible". So you have two equal margins on the left and the right, filling up the space completely, and hence you have a centred div.
This will only work on block elements like divs though - inline elements cannot have auto margins. If you need to centre an inline element (like a span or some text), use text-align: center; on the parent:
#parent {
text-align: center;
}
You could set the margins to: margin: 0, auto;
For fun you could use the CSS Flexible Box Layout Module. Here is a jsFiddle demonstrating what you could do:
See working jsFiddle demo
HTML
<footer>
<div class="dynamic-content">Here is some child dynamic content</div>
</footer>
CSS
body
{
background: #ccc;
}
footer
{
/* As of August 2012, only supported in Chrome 21+ */
display: -webkit-flex;
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #232323;
}
footer .dynamic-content
{
flex: 1;
padding: 10px;
margin: 0 auto;
background: #545454;
color: white;
font-family: verdana;
}
Centering a div using CSS:
HTML:
<div class="center">
.... more content ....
</div>
CSS:
.center {
margin: 0 auto;
}
OR
.center {
margin-left: auto;
margin-right: auto;
}
The margin: 0 auto; sets the left and right margin to whatever pixel left on the left and right of the page.
Try in jsfiddle
Make it display as an inline element and give the parent the property of text-align center
problem solved
#parent{
text-align:center;
}
#child{
display:inline-block;
}
Edit:
check how it works http://jsfiddle.net/ECMau/1/
I have a responsive element where it's width and height will both scale. Inside this I have some text which I want to center vertically.
How can I set the text's line-height to be the same as it's parent if I don't know the parent's height?
line-height: 100% is relative to the font's regular height so this doesn't help...
Here's another way to center an element vertically. I came across this technique some time ago. Basically it uses a pseudo element and vertical-align: middle.
.block::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
Since it's 2019 already, you could also use flexbox to achieve this :)
To do so, add the following classes to the parent element:
display: flex;
flex-direction: column;
justify-content: center;
See this Fiddle
I'd try putting the text inside another element, of which you know (or set) the size. Then setting relative positioning to it, top, left 50% and negative left and right margins.
See this Fiddle
The only problem is that this relies on a known/fixed textblock. If the text is variable, I'm afraid you will have to resort to using Javascript..
Regarding hyperlinks:
I was having this problem regarding links in main menu. And since it was <a> in <li> tags I needed some surface for the links to be clickable/touchable(see touch target size).
So what I did was for the <ul> I set a fixed height(through it's parent in this case), the <li>-s are a percentage of it and the <a>-s have a min-height and line-height properties set to them and it's easy from there to set the top. The code:
.menu-header-main-container{
position: fixed;
top: 0;
bottom: 160px;
}
.menu-header-main-container ul.menu {
height: 100%; }
.menu-header-main-container ul.menu li {
height: 33.33%;
max-height: 110px; }
.menu-header-main-container ul.menu li a {
line-height: 40px;
min-height: 40px;
top: calc(50% - 20px);
position: relative; } }
You cannot set the line-height to 100% of the parent element's height with only CSS. Rather, you can use CSS to center an element vertically.
.parent {
height:150px;
position:relative;
border:1px solid #FDD;
}
.position-center {
position:absolute;
top:50%;
transform:translateY(-50%);
}
<div class="parent">
<span class="position-center">I am vertically centered element</span>
</div>
Wow, 2022 and I don't think we have a decent way to do this still. What I used to do and I think is the less painful idea is to use a table for layout. Tables will naturally center text vertically, or you can use "vertical-align"
<table style="width: 100%; height: 100%; text-align: center">
<tr><td>Your text</td></tr>
</table>
Not great, but at least you can center text without ever having to specify fixed heights.
I am having an issue with line-height that I cannot quite get my head around.
The following code will center an image within a div:
CSS
.bar {
height: 800px;
width: 100%;
line-height:800px;
background-color: #000;
text-align: center;
}
.bar img {
vertical-align: middle;
}
HTML
<div class="bar">
<img src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>
However, if I change the line height to 100%, then the line height does not take effect (or at least does not become 100% of the div).
Example jsfiddle
Does anyone know what I am doing wrong?
line-height: 100% means 100% of the font size for that element, not 100% of its height. In fact, the line height is always relative to the font size, not the height, unless its value uses a unit of absolute length (px, pt, etc).
I know this question is old, but I found what for me is the perfect workaround.
I add this css to the div that I want to center:
div:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
This works every time and it is clean.
Edit:
Just for completion's sake, I use scss and I have a handy mixin that I include on every parent who's direct children I want to have vertically centered:
#mixin vertical-align($align: middle) {
&:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: $align;
// you can add font-size 0 here and restore in the children to prevent
// the inline-block white-space to mess the width of your elements
font-size: 0;
}
& > * {
vertical-align: $align;
// although you need to know the font-size, because "inherit" is 0
font-size: 14px;
}
}
Full explanation:
div:before will add an element inside the div, but before any of its children. When using :before or :after we must use a content: declaration otherwise nothing will happen, but for our purpose, the content can be empty. Then we tell the element to be as tall as its parent, as long as its parent's height is defined and this element is at least inline-block. vertical-align defines the vertical position of self related to parent, as opposed to text-align that works differently.
The #mixin declaration is for sass users and it would be used like this:
div {
#include vertical-align(middle)
}
When you use percentage as the line-height it is not based on the div container, rather its based on the font-size.
line-height: 100% would be an easy way to vertically center elements, if it was calculated in relation to the container, but that would be too easy, hence it doesn't work.
So instead, it is just another way of saying line-height: 1em (right?)
Another way of vertically centering an element would be:
.container {
position:relative;
}
.center {
position:absolute;
top:0; left:0; bottom:0; right:0;
margin: auto;
/* for horiz left-align, try "margin: auto auto auto 0" */
}
might not be pretty, but it's working, and its semantic;
<div class="bar" style="display: table; text-align: center;">
<img style="display: table-cell; vertical-align: middle;" src="http://27.media.tumblr.com/yHWA4oxH870ulxnoH7CkOSDR_500.jpg" alt="Foo Image" />
</div>
display: table-cell gives an element the unique table ablillity to align verticaly (atleast i think its unique)
This is a very late answer, however in modern browsers, assuming that the parent element is 100% of the screen height as well, you can use the vh viewport unit.
FIDDLE
line-height: 100vh;
Browser support
A more modern approach is to use flexbox for this, it is simpler and cleaner. However, flexbox is an entirely different paradigm from what inline-block, float or position used to be.
To align items inside .parent you do:
.parent {
display: flex;
align-items: center;
}
That is about it. Children of flex parents are automatically converted to flex child items.
You should read more about flexbox, a good place to start is this cheat sheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This is the modern solution in which you need to set the following CSS in the container div or outer div.
.outer-div {
display: flex;
justify-content: center;
align-items: center;
}
Another following solution may be applied to the element which you want to make centered vertically. Note that the outer or container div should be
.inner-div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
Note that the outer or container div position should be relative.
This solution works in IE9 and above. First we set the child's top position to 50% (middle of the parent). Then using translate rule, shift the child up by a half of its actual height. The main benefit is that we don't need to define child's height, it's calculated by the browser dynamically. JSFiddle
.bar {
height: 500px;
text-align: center;
background: green;
}
.bar img {
position: relative;
top: 50%;
transform: translate(0, -50%);
}
You can set line-height based on that element height. If the element height 200px means you need to set line height to 200px to center the text.
span {
height: 200px;
width: 200px;
border: 1px solid black;
line-height: 200px;
display: block;
}
<span>Im vertically center</span>
I want to set vertical alignment of image inside a div. I use img { vertical-align:middle}
but it is not working.
Using the line-height property will solve the problem:
<style>
.someclass {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
border: dotted;
}
.someclass img {
margin: auto;
vertical-align: middle;
}
</style>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
This is a solution that doesn't require JavaScript (as my previous solution did).
You can achieve what you want by assigning display: table-cell to the containing div. Here's an example: http://jsbin.com/evuqo5/2/edit
I feel I must warn you that you will need to test this in every browser you intend to support. Support for the table-cell value is fairly new, particularly in Firefox. I know it works in Firefox 4, but I don't know about any of the 3.x iterations. You'll also want to test in IE (I've only tested in Chrome 10 and Firefox 4).
The CSS:
div#container {
width: 700px;
height: 400px;
position: relative;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
}
div#container img {
margin: 0 auto;
display: block;
}
You won't need the div#container img styles if you don't also want to horizontally align the image.
If you're trying to do what I think, vertical align isn't going to work; you'll need to use positioning.
In general, position the container relative, and then position the image absolute, with top and left set to 50%, and then move the image back to the center by setting negative margins equal to half the width / height.
Here's a working example: http://jsbin.com/evuqo5/edit
Basic CSS is this:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
See this awser: How to vertical align image inside div
If you want to align horizontally also, add the right and left, like this:
div {
position:relative;
}
img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
The following post has some useful references:
Text Alignment w/ IE9 in Standards-Mode
Also, depending on which version of IE you are testing against, you may end up needing some browser-specific hacks or some jQuery/JavaScript code.
If you have to, use a one-row-one-cell table and take advantage of the vertical-align property. This is brute-force, not overly semantic, but it works.
If you set the div display attribute to table-cell then vertical-align: middle; will work.
The vertical-align rule only affects table cells or elements with display: table-cell.
See this article from SitePoint for a detailed explanation.
<style>
/* change body to .someClasses's parent */
body {
width: 100%;
height: 100%;
display: table;
}
body > .someclass {
width: 300px;
height: 300px;
text-align: center;
border:dotted;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="someclass">
<img src="someimg.jpg" border="0" alt="">
</div>
</body>