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
Related
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>
I am trying to center a text of variable length inside a container with fixed height. I thought I've found a solution with an absolute positioned wrapper container, using
top: 50%;
transform: translateY(-50%);
on the text to be centered. It works fine in Firefox and IE, but does not work in Chrome:
Fiddle: https://jsfiddle.net/9uathmvh/7/
Does anyone know why?
Thanks in advance :)
It is because anchor tag is not a block element.
I removed the position rules in .container and .link classes and just set the anchor element height of 100% in order to fill its container.
In my opinion, it would be better to vertically center the whole a.link rather than only its content, but I don't know your exactly needs, so I left it like you asked it.
Please take a look in the snippet below:
.container {
height: 42px;
width: 200px;
border: 1px solid blue;
margin-bottom: 5px;
}
.link {
height: 100%;
display: block;
}
.center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class="container">
<a class="link">
<div class="center">
Centered Text in one line
</div>
</a>
</div>
<div class="container">
<a class="link">
<div class="center">
Centered Text, more than one line but still centered
</div>
</a>
</div>
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%);
}
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 tried to display vertical text exactly in center of div (navigation button) which is nested in floating element, I set size,magin:auto, vertical-align but text is on the edge against center.
Is there any other way to put the text where it should be without using absolute positioning?
<nav>
<div class="button"><p class="rotare">1st button</p></div>
<div class="button">1</div>
<div class="button">1</div>
<div class="button">1</div>
</nav>
nav {
width: 50px;
height: 600px;
background-color: red;
margin-left: 0px;
top:0px;
position: absolute;
display: inline-block;
float:left;
}
.button {
width: 50px;
height: 150px;
background-color: pink;
}
.rotare {
position: relative;
text-align: center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
background-color: white;
margin:auto;
vertical-align: middle;
width: 100px;
height: 20px;
}
You can do this with absolute positioning, but without having to manually push the content into its place by simply adding these rules to your existing css:
.button {
position: relative;
}
.rotare {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Here's a JS Fiddle of it in action: http://jsfiddle.net/grammar/NgrWg/
And here's an article explaining this method of vertical centering in more detail: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
EDIT - secondary approach without absolute positioning
Another approach is to use table and table-cell as the display property for the wrapper and text respectively. I've updated the fiddle to show that method as well: http://jsfiddle.net/grammar/NgrWg/1/.
Here's another article that explains this table-cell trick, and also outlines a third technique for centering things vertically: http://css-tricks.com/centering-in-the-unknown/