I'm trying to get a div to vertically align in the middle of a parent div. I'm using bootstrap for the layout. I have tried to put the following code at the container, row and col level of the HTML but with no luck.
.container { // or .row or .col
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Codepen
Not sure what I'm doing wrong. As you will see from the Codepen link above, instead of the desired div being vertically aligned in the middle of the section, it goes UP to go half above and half below the top of the "screen". I've adjusted the % to 100% instead of -50% which brings it down the screen but that doesn't make sense or follow the code of other Codepens I have seen.
Instead of position: relative use position: absolute:
Revised Codepen
.container {
position: absolute;
left: 0;
right: 0;
top: 40%;
}
Absolute is what you want.
This can be positioned absolutely in its parent container because it has a position set.
Full solution:
/* PROBLEM ELEMENT */
.container {
position: absolute;
top: 50%;
right: 0;
left: 0;
margin: auto;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Related
When working with hero images or full screen anything, I typically see text or images with the following bit of CSS:
.item {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
What is this code actually doing?
The reason why transform: translate(-50%, -50%) is required is because you want the center of the element to line up with the center of its parent. In simple terms, it can be boiled down to translateX(-50%) translateY(-50%), which means:
move me leftwards by 50% of my width, along the x-axis, and
move me upwards by 50% of my height, along the y-axis
This effectively moves the center of the element to its original top left corner. Remember then when you set left: 50%; top 50% on the element, you are moving its top left corner to the center of its parent (which means it is not visually centered at all). By moving the element back leftwards and upwards by half of its width and height respectively, you are sure that its center now aligns with the parent's center, making it visually horizontally + vertically centered.
As a proof of concept, see the code snippet below: hover over the parent to cause the child element's "ghost" to reposition itself by means of transform: translate(-50%, -50%):
body {
margin: 0;
padding: p;
}
.parent {
background-color: #ccc;
width: 100vw;
height: 100vh;
position: relative;
}
.child {
background-color: rgba(0,0,255,0.5);
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
}
.child::before {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
content: '';
transition: all .5s ease-in-out;
}
body:hover .child::before {
transform: translate(-50%, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
TL;DR version
Let's say there is a .container and an .item inside.
This code below is positioning .item relatively to .container; meaning .item top left corner is in the center of its container
.item {
top: 50%;
left: 50%;
}
While the below is positioning .item relatively to its own width and height; meaning minus 50% of its width and height.
.item {
transform: translate(-50%, -50%);
}
If the two code snippets below are combined, then the expected center will show up.
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 6 years ago.
I've tried almost everything, but maybe my case is too specific. I have a few blocks (rows) without space between then and I need to absolute center it and as you can see it's not centered when is 2 lines.
1) I can have one line or more, so I can't use line-height solution in this case.
2) The flex solution didn't worked for iPhone.
3) The block width and height are variable
4) The text like "personal & buchhaltung" cannot overlap the mouse hover of the block (becomes colorful when mouse hover)
.portfolio-tile span {
width:100%;
position: absolute;
z-index:999;
top:0;
left:0;
right:0;
margin:0;
text-align: center;}
.portfolio-tile {
position: relative;
}
.portfolio-tile span {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
There are other, better ways of centering. The major problem this one has is when the span has too much content for the parent to fit, as it will overflow. Possible fixes exist but, for your case, this will do.
Here's the fully prefixed code (you mentioned iPhone):
.portfolio-tile {
position: relative;
}
.portfolio-tile span {
max-width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Use autoprefixer to prefix your CSS before deploying to production. For max browser compat, use > 0% as setting (small input at the bottom).
I can't see why the flex solution wouldn't work. Have you tried creating a div within and using the flex solution there?
#absolute {
position: absolute:
top: 0;
left: 0;
width: 100%;
}
#flexbox {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background: blue;
}
#flexbox-content {
text-align: center;
color: white;
}
<div id="absolute">
<div id="flexbox">
<div id="flexbox-content">
<h1>It works!</h1>
<p>Multi line!</p>
</div>
</div>
</div>
This question already has answers here:
Center text over an image in flexbox
(6 answers)
Closed 5 years ago.
I don't even know if this is possible using CSS only, but I have to ask.
PLEASE, read the specs before you provide an answer, accordingly. Thank you!
My markup:
<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>
Obviously, .wrapper will have the height of my img element, if that's a block.
Then, I need the p element to be centered horizontally and vertically inside the wrapper. I don't have a fixed width or height for the p element.
So, regardless paragraph size or even image size, it should be vertically and horizontally aligned, as is shown here http://i.imgur.com/phiR48H.png or here http://i.imgur.com/Xvdt42j.png.
If I set absolute position on the paragraph, it will not vertically align, because I cannot set negative margin if I don't know paragraph height.
I was thinking about table and table-cell (vertical-align: middle;), but I only have 1 cell. Any thoughts?
Added fiddle: http://jsfiddle.net/f3x7977z/
It's important that the provided solution have backwards compatibility, in special in IE8+.
Any suggestions on extra wrappers, for the sake of the final result, are welcome!
Explanation
Change the CSS property position of the wrapper to relative and of element you want centered to absolute.
Then position the element in the middle of the wrapper using top: 50% and left: 50%.
After this you will notice that the element is not exactly centered, because it's own height and width are off the calculation.
So we fix with the property transform: translate(-50%, -50%), which brings the element half of it's height up, and half it's width left. The result will be a vertically and horizontally centered element.
Since we are taking IE8 into consideration, we will use a filter to achieve the same effect as the transform: translate.
In order to generate the filter attribute, the following resource was used: IE's CSS3 Transforms Translator
Example
.box {
margin: 10px;
display: inline-block;
position: relative;
}
.box span {
position: absolute;
top: 50%;
left: 50%;
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, 1);
padding: 5px;
}
.box.translate > span {
transform: translate(-50%, -50%);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
}
<div class="box translate">
<img src="http://placehold.it/500x200" />
<span>centered text</span>
</div>
How to Center Vertically and Horizontally Multiple Absolutely Positioned Child Elements
Other answers posted here already address the IE8 requirement. This answer offers an clean and efficient solution for people who don't care about IE8.
HTML (no changes)
<div class="wrapper">
<img src="http://placehold.it/350x150"/>
<p>My text, size unknowkn</p>
</div>
CSS
html, body { height: 100%; } /* necessary when using percentage heights within body
on non-absolutely positioned children (such as .wrapper)
http://stackoverflow.com/a/31728799/3597276 */
.wrapper {
height: 100%;
width: 100%;
position: relative; /* establish nearest positioned ancestor for abs. positioning */
}
img {
position: absolute;
left: 50%; /* positions img relative to container */
top: 50%; /* positions img relative to container */
transform: translate(-50%, -50%); /* positions img relative to its height and width */
}
p {
position: absolute;
left: 50%; /* positions p relative to container */
top: 50%; /* positions p relative to container */
transform: translate(-50%, -50%); /* positions p relative to its height and width */
margin: 0;
}
DEMO: http://jsfiddle.net/f3x7977z/7/
There is a much more lightweight solution.
Take 50% of the outer element down from the top
margin up 50% of these 50% to the inside element to get on the center of bottomline of the outer element (see fiddle below)
.wrapper {
position: absolute;
top: 50%; left: 50%;
}
img { /* or a container with img and p */
margin-top: -25%; margin-left: -50%;
}
<div class="wrapper">
<img src="http://placehold.it/350x150">
<p>Some text random size</p>
</div>
Check this solution
HTML
<div class="wrapper">
<img src="http://placehold.it/350x150"/>
<span></span>
<p>My text, size unknowkn</p>
</div>
CSS
.wrapper
{
position: relative;
}
p
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
In stead of the solution you should use this one
.wrapper {
position: absolute;
top: 50%; left: 50%;
}
img {
margin-top: -25%; margin-left: -25%;
}
I have searched for a resolution to my problem, but have not yet been successful.
I have images of different sizes in Nivo Slider, but I need to create a viewport that displays the image centered in a div. It's hard to explain, but I have included a diagram below.
The image must be centered in a div, while the div must also be responsive. I don't want the div to change its size and would like the image to create an overflow that is hidden on the div.
I have tried different methods of CSS and HTML, but neither are my greatest strengths.
If I understand correctly what you want to achieve is something like this (uncommenting /*overflow: hidden;*/): DEMO
HTML:
<div>
<img src="http://i.imgur.com/cjgKmvp.jpg"/>
</div>
CSS:
div{
position: relative;
margin: 100px auto;
width: 400px;
height: 300px;
border: 3px solid red;
/*overflow: hidden;*/
}
img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
Note: I comment overflow: hidden; so you can see how the image is positioned.
I am trying to align an image vertically within a div with overflow set to hidden so that the container has the same height for each post. I have tried a lot of other solutions, but it is not working with the overflow element. Anybody? This is my CSS code so far:
.featured-image-blog{
height: 220px;
width: 600px;
overflow: hidden;
}
.featured-image-blog img{
height: auto;
width: 600px;
}
and the HTML:
<div class="featured-image-blog">
<?php the_post_thumbnail('featured-image'); ?>
</div>
Thanks in advance!
As vertical alignment has always been a pain in legacy HTML and stuff I suggest you give the div:
position: relative;
And give the img:
position: absolute;
top: 50%;
transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
That should do it..
Have you tried using the vertical-align CSS property?
Give this a try:
.featured-image-blog img{
height: auto;
width: 600px;
vertical-align: middle;
}
It should align it to the middle of the parent container.
Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align