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.
Related
I have an image that takes up the whole screen. Now I want to have centered text over it. The method that I'm using works great for single line text but when I have two lines, it centers the longest line and aligns all other lines to the left of the longest one. How can I make all of them centered?
Here's the class that I'm using to center my text over the image:
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Add text-align:center;
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align:center;
}
Updated demo at https://codepen.io/gpetrioli/pen/eeoKyo
and if the tests adding each line in a block of <p> would be easier for you and would allow you to center content without problem
for example
.centered {
position: absolute;
display:block;
width:100%;
text-align:center;
}
<h1 class="centered">
<p>lorem ipsun</p>
<p>holamigo</p>
</h1>
I know this may seem like a newby question, but is it possible to set an image element as a parent? If so, how can I do so?
Heres an example of what I'm looking for:
Also, the reason I can't just have the div element as the parent is that I want that text element relative to that image element, not the div element. This way I can center the text relative to the image. Thanks in advance for any help!
Looks like I've figured it out. I started messing with some values and I got it.
HTML:
<div id="main-div">
<img id="image" src="url.com/image.png">
<h1 id="text">Caption</h1>
</div>
CSS:
#main-div {
position: absolute;
top: 30px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
}
#image {
position: absolute;
top: 130px;
left: 50%;
margin: 0px auto;
transform: translate(-50%, 0);
color: white;
font-family: "Roboto";
text-align: center;
}
#text {
position: absolute;
top: 30px;
left: 15%;
margin: 0px auto;
transform: translate(-50%, 0);
display: block;
border: thin red solid;
}
Here's a JS Fiddle of the code and final result: https://jsfiddle.net/k3b70Lg7/
No you cannot because image elements are replaced.
You can however wrap the image and the text element in another div and position that.
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="..">
<div class="text"></div>
</div>
</div>
Now setting the wrapper to be inline-text means that it will expand according to contents (the image) and by setting it also to be position:relative you can position the text (position:absolute) wherever you want inside it.
Full example
.outer-black {
background: black;
padding: 2em;
}
.inner-image-text-wrapper{
position:relative;
display:inline-block;
}
.inner-image-text-wrapper img{display:block;}
.inner-image-text-wrapper .text{
position:absolute;
top:105%;
left:5%;
right:5%;
text-align:center;
background:rgba(255,255,255,0.5);
}
<div class="outer-black">
<div class="inner-image-text-wrapper">
<img src="http://lorempicsum.com/simpsons/300/200/1">
<div class="text">image caption</div>
</div>
</div>
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>
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%;
}