I'm making some page with Vertical Sliding Content. This works well but, i can't center verticaly my content div.
See my fiddle: http://jsfiddle.net/39kfL/1/
What i need to center the .content class vertically from TOP to the beginning of footer content.
Notion
Use the Centering In The Unknown CSS hack to vertically center a container with an unknown size; Apply the appropriate rules to the .item and the .container notated elements to center the contained element within its parent.
In order to pull that off successfully you would also have to compensate for the footer's offset, and set a bottom margin to .content. In addition, lose the top: 17px declaration on the same element, as it seem to serve no purpose.
Code Implementation
.content {
position: relative;
margin: 0 auto 150px;
background-color:#aaa;
}
/* ... */
.item:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.content {
display: inline-block;
vertical-align: middle;
}
Demo
On jsFiddle
Reference
Centering in the Unknown by Chris Coyier
Related
I am using the tag <h1> in HTML and I'm trying to put the text in the middle of the webpage, no matter how much you change the size of the webpage. Basically so the text is responsive to the size of the webpage as well. Here is what I mean:
In my css page, I tried to do the following:
h1 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
However, this didn't work. How would I do this?
You can do that multiple ways, two common ones are with the positioning and Flexbox:
Positioning:
body {
position: relative; /* usually the parent, in this case the body element, has position relative so that the absolute positioned child is positioned relative to it */
height: 100vh; /* 100% of the viewport height */
margin: 0; /* recommended */
}
h1 {
position: absolute; /* taken out of the normal flow of the document */
top: 50%; /* moved down by 50% of the screen height */
transform: translateY(-50%); /* moved back up (Y axis) by half of its height to achieve the perfect center */
width: 100%; /* needs to be defined to keep the default block behavior */
text-align: center;
margin: 0; /* again, for perfect center */
}
<h1>This is center aligned text</h1>
Flexbox:
body { /* or any other parent element */
display: flex; /* flex behavior (displays children inline) */
justify-content: center; /* horizontal centering */
align-items: center; /* vertical centering */
height: 100vh;
margin: 0;
}
h1 {
text-align: center; /* comes in handy when resizing the browser width, if the text is long/big enough */
}
<h1>This is center aligned text</h1>
Just Try this:
body{
position:relative;
}
h1{
position:absolute;
width: /*your desired width*/
top:0;
bottom:0;
left:0;
right:0;
margin:auto auto;
text-align:center;
}
Note: parent class always be relative when you use absolute child class.
As a table cell, as you tried, works BUT it's the wrapper not the h1 the element to be made a "table-cell", so the h1 can be vertically centered to middle. To make that cell cover the whole screen you can use 100vh height and 100wv width... or position fixed using the 4 corners to force it to cover the whole screen (top;0, left:0, right:0, bottom:0;).
https://jsfiddle.net/ahqamm7o/1/
#parent {
text-align: center;
}
.content {
display: inline-block;
text-align: left;
margin: auto;
width: 50%;
}
.menu {
float: left;
text-align: left;
width: 20%
}
I tried using techniques from CSS: center element within a <div> element but this does not seem to apply for DIVs with an 'inline-block' style.
Note 'inline-block' is not a requirement I have, I am just merely looking for the menu to float left and the content to be positioned directly to the side of it (with the content centered relative to 'parent')
I am trying to center 'content' relative to 'parent'
(that is, center 'content' as if 'menu' was not there).
If you specified the limited width then float:left is not needed, apply the text-align:center to the .content class so it will align the content center with in that particular div, if we use position:absolute the parent should be in position:relative.
You had some tag issues: An extra section tag, div tag.
To solve your issue I removed float: left from .menu and added:
position: absolute;
top: 0px;
left: 0px;
This will always position the menu on the left and the primary content will be centered as if the menu is not there.
Fiddle: https://jsfiddle.net/ahqamm7o/2/
I have two elements, both with display: inline-block, and the parent has white-space: nowrap.
When the screen is resized, the div on the right side don't resize, like this.
I'm trying to make only the blue div resize.
Full source (jsfiddle)
The structure of the html is like this:
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
<article>...</article> <!-- blue -->
</div>
Relevant css:
* {
box-sizing: border-box;
}
div.container {
margin: 0 auto;
max-width: 40em;
padding: 0;
white-space: nowrap;
}
div.container > * {
white-space: normal;
}
.aside {
display: inline-block;
max-width: 15em;
vertical-align: top;
}
.article {
display: inline-block;
max-width: 25em;
}
Old question, but for the sake of knowledge of anyone who reads this and also has the doubt:
What I've found is that setting position: relative on the .container
and position: absolute on the .article does what I want.
An absolute positioned element is positioned relative to the nearest positioned ancestor, where a positioned element means anything with a position property different to static, the default; if does not found any positioned element, uses the body element.
The absolute positioned elements, if has their width and heigth in auto, resizes to fit its content, and limits the maximun sizes by its positioned ancestor. You can check this putting a short string instead a large one: the element will shrink to the length of text. If you remove the positioning from div.container, the article (if still positioned absolute) will grow (depending on its content) to cover the space between previous element and body width.
And, related to the aforementioned and to add some utility to this delayed answer, a not-very-know bonus: if you define the right and left properties of a absoluted positioned element, and leave the width in auto, the element will cover the horizontal size between the right and left defined. This way you could put something like
article {
background-color: #a0f4ec;
display: inline-block;
position: absolute;
right: 0;
left: 30%;
}
div.aside {
background-color: #faf;
display: inline-block;
max-width: 15em;
width: 30%;
}
This trick also applies in a vertical sense, but with height, top and bottom properties.
There are a few ways to do it.
Method 1:
two divs the same line, one dynamic width, one fixed
Method 2 (negative margins)
http://alistapart.com/article/negativemargins
Unfortunately, Narxx's answers require the divs to be floated. I'm sure that's what you should do if you're building a real site, but in my case, I'm trying not to use it.
What I've found is that setting position: relative on the .container and position: absolute on the .article does what I want.
Simplified fiddle
If anyone can explain why, I'll mark it as an answer.
I would like to center and clamp the dimensions of a child div inside its parent.
<style type='text/css'>
.parent {
width: 100%;
height: 100%;
}
.child {
max-width: 100%;
max-height: 100%;
}
</style>
<div class="parent">
<div class="child">
<img src='dog.jpg' />
</div>
</div>
Here are the constraints:
The parent div is set to occupy the entire screen (of unknown size), so width:100% and height:100%.
The width and height of the child div are unknown. In one use case, the child div contains an image. In another, it contains a video.
The width and height of the child div must be constrained to the size of the parent, so max-width: 100% and max-height: 100%.
The child div must be vertically and horizontally centered inside the parent.
Ideally, this should work without javascript.
IE can be left unsupported :)
I've tried all the techniques listed in this excellent article, 'Absolute Centering in CSS' , and none of them pan out. Here's why:
Absolute centering: In order for this technique to work with a child of unknown size, you must set display:table on the child. You can then constrain the max-width of the child's contents, but not the max-height, because by CSS 2.1 rules, tables render to fit their contents.
Negative margins: Doesn't allow for variable height.
Transforms: Undesirable because it can result in blurry rendering.
Table-cell: Fails for the same reason that absolute centering fails, i.e. table rendering.
Inline-block: Doesn't work in the important case where the child is 100% width.
Flexbox: Works well until a window resize occurs, at which point you have to force a Webkit redraw to propagate the centering changes. This hack does the job, but it's still a hack. I want to believe there's a more elegant solution to this.
Best solution here is to use :before pseudo element. Check out this article on centering the unknown, http://css-tricks.com/centering-in-the-unknown/
SEE THE DEMO HERE
body,html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
text-align: center;
background: #ccc;
width: 100%;
height: 100%;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
.image {
display: inline-block;
max-width: 100%;
max-height: 100%;
vertical-align: middle;
padding: 10px 15px;
border: #a0a0a0 solid 1px;
background: #f5f5f5;
}
You could use display:table and display:table-cell like so Jsfiddle. Though this will just center the image of the child div.
If you need to have a centered div around the image you could always add another div inside of the child div with the style display: inline-block example
I have the following js-fiddle. It's basically just a div that has a bunch of square child elements. The issue is that the div doesn't always stay centered. I've already set the following CSS:
.boutique-grid {
text-align: center;
margin-left: auto;
margin-right: auto;
}
I am not sure why it's not centering the child element div's. Any idea?
Remove float left from your .boutique-grid-column class. It will solve the issue.
The boutique-grid is centered, but it's 100% wide. You can set a width to for example, 710px;
.boutique-grid {
overflow: hidden;
width: 710px;
}
.boutique-grid {
text-align: center;
}
.boutique-grid-column {
...
margin: 0 auto;
}
Remove float:left; and this will work fine, you already have display:inline-block; set so no need to float the element.
http://jsfiddle.net/wy7rd/3/
This is what the spec says about float:
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).
This is why .boutique-grid-column becomes block when float is specified and ignores text-align.
Set width of div and image.
.boutique-grid {
width: 300px;
text-align: center;
margin-left: auto;
margin-right: auto;
}