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>
Related
Is it possible for me to remove the container div completely and turn the image into the container, retaining the width and height of the image but also keeping the styles of the container that is already in my stylesheet? Any suggestions would be greatly appreciated. Thanks!
.img_zoom_container {
position: relative;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 45%;
}
.img_zoom_window {
border: 2px solid #d4d4d4;
width: 300px;
height: 300px;
position: absolute;
top: 20%;
left: 0%;
margin-left: -200px !important;
transform: scale(0) translateY(-50%);
transform-origin: 0% 0%;
transition: all ease .2s;
}
.img_zoom_container:hover .img_zoom_window {
left: 170%;
transform: scale(1) translateY(-50%);
}
<div class="img_zoom_container">
<img id="main_img_kit" class="prod_img mobile_hideb" height="300" width="300">
<div id="img_main" class="img_zoom_window"></div>
</div>
As Felipe mentioned, if you are trying to display other elements on top of (within) the image, you could always set the image as the background of the container and simply put more containers within the outer container for your other divs.
One method to have a background image push the parent containers width and height would be to use 2 images.
<div class='container'>
<img src='http://via.placeholder.com/350x150' class='pusher' />
<img src='http://via.placeholder.com/350x150' class='animator' />
</div>
They can be the same image just with one at 0 opacity and pointer events disabled. This approach is also easy to make responsive. I set up a demo for you here:
https://codepen.io/cidicles/pen/djMXeW
Hope it helps!
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'm trying to add something very similar to this design on a site I'm working on:
http://www.templatemonster.com/demo/54794.html
Notice how the mediumturquoise blocks in the bg of the site are diagonal but remain responsive while also having elements in front of them?
How would one go about accomplishing something like this? Is it an image set to full width in css? If so, how do I add content in front of the element?
Here's a screenshot just in case the link expires or I'm not being clear as to what element I'm talking about:
http://screencast.com/t/yYwOuHidK
Use a background image!
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
.bg-image h1 {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
color: white;
}
.nav, .main {
background-color: #f6f6f6;
text-align: center;
}
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="nav">nav area</div>
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
</div>
</div>
See it in a new window (change browser size)
Maybe you could use the CSS transform property like this:
<html>
<div class="rotate-wrapper">
<div class="my-rotated-div">
<div class="rotated-div-content">
My Content
</div>
</div>
</div>
</html>
CSS:
my-rotated-div {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
rotated-div-content {
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
Then you just apply the bootstrap styles to rotate-wrapper and you should be good to go.
If you just want the look of a rotated block you could just use a background image but then you have to micro manage the background-position to match up with what you want.
How do I both vertically and horizontally center the span element without using tables?
I need the picture on the left and thereafter the span aligned in center of the wrapper div. The span element should not be aligned in between the img and right side, but the whole div itself.
Fiddle
<div style="height: 100px; background-color:black;color:white;">
<img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg">
<span class="hejsa">hej du</span>
</div>
Try this
css
div{text-align:center;line-height:100px;position:relative;}
img{position:absolute;left:0}
html
<div style="height: 100px; background-color:black;color:white;"><img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg"><span class="hejsa">hej du</span></div>
fiddle
As the OP stated:
I need the span centered with respect to the whole site.
One option could be to position the <span> element absolutely and align the text to the center horizontally and vertically as follows:
Method #1:
Using top/left and transform properties:
.wrapper {
position: relative;
height: 100px; background-color:black; color:white;
}
.wrapper > span.hejsa {
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%);
}
<div class="wrapper">
<img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" />
<span class="hejsa">
Lorem ipsum dolor sit amet...
</span>
</div>
It's worth noting that CSS transform is not supported in IE8 and olders (which is not the OP's concern as s/he mentioned in comments)
Method #2:
Expanding the absolutely positioned <span> element by top/right/bottom/left properties:
.wrapper {
position: relative;
height: 100px; background-color:black; color:white;
}
/* .wrapper > img { position: relative; z-index: 1; } */ /* optional */
.wrapper > span.hejsa {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
line-height: 100px;
text-align: center;
}
<div class="wrapper">
<img style="height:100px;" src="http://www.kiplinger.com/quiz/business/T049-S001-test-your-start-up-know-how/images/all-small-businesses-have-to-be-incorporated1.jpg" />
<span class="hejsa">
Lorem ipsum dolor sit amet...
</span>
</div>
This method has a wider browser support, however one drawback of it is the text should not be multiline.
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