I have a div with position: fixed; whose height changes according to height of browser window. And I want to horizontally center text span inside that div. How can I accomplish this using just CSS? (Also, I want to make it IE8 compatible.)
#fixed_div{
position: fixed;
top: 40px;
bottom: 40px;
right: 0px;
width: 40px;
}
#text_span{
/* ??? */
}
The top: 50% trick won't be precise, since it will be a little lower, there are couple of tricks:
Span position is absolute, top is 50% AND margin-top -> -50% of the span height (can try with %, preferably with the height of the span if it's known).
#text_span {
position: absolute;
top: 50%;
margin-top: -50%; //or pixels (according to Mr. Green it has to be pixels)
width: 100%;
text-align: center;
}
Wrap the span with a div that has display: table, and the span is display: table-cell
#wrapper-div {
display: table;
height: 100%;
}
#text_span {
display: table-cell;
width: 100%;
vertical-align: middle;
}
Working fiddle for the table method: (it doesn't work on the fixed element directly, you have to add another element inside) http://jsfiddle.net/a4ndeza5/1/
Hope this helps.
Related
I have a container div where height and width are set to 100% and position is relative. Inside the div I center an image (image is smaller than div) using display: block and margin:auto. Then I am attempting to center text inside the image using position: absolute, left: 45%, top 82px. Vertical alignment appears to be okay, but as the number of characters in text grows the text is no longer aligned in the middle. So in my image below if text is 4 characters the text would no longer be centered. Is there a better way to dynamically align text?
html:
<div id="countup-container">
<img id="countup-image" src="https://i.stack.imgur.com/9YqKE.png" alt="Accident Free Days">
<span id="ctl00" class="countup-text">101</span>
</div>
Relevant CSS:
#countup-container {
height: 100%;
width: 100%;
position: relative;
}
#countup-image {
display: block;
margin: auto;
width: 300px;
height: 240px;
}
.countup-text {
z-index: 100;
position: absolute;
color: black;
font-size: 40px;
font-weight: bold;
left: 45.3%;
top: 82px;
}
If you are using absolute positioning to center it you would want to change your left: 45%; to left: 50%; then set a transform like this:
.thing_to_center_horizontal {
top 82px;
left: 50%;
transform: translateX(-50%);
}
This will make it center even with dynamic content.
left: 50%; will put it in the center based on the top left corner of the content, then transform: translateX(-50%); will move it 50% of the content's width (this is the dynamic part) to the left making it center.
Make sense?
But maybe a simple text-align: center; might work, but its hard to tell because you did not post any code.
If I understand you, you could simply add text-align:center to your #countup-container.
And remove left:45% to your .countup-text
I want to place an image circle on specific words.
<p>
<span class="Subjekt">Vater</span>
<span class="Praedikat">bringt</span>
</p>
with
.Subjekt:before {
position: absolute;
background-image: url(images/markup/einkreisen1.png);
background-size: 100% 100%;
display: inline-block;
margin-left: -20px;
width: 100px;
height: 50px;
content:"";
}
Which works fine. But with a fixed size.
Is there a way to define the width of the pseudo element relative to the .Subjekt element?
Use relative positioning for the before element with respect to Subjekt element.
See example below:
Give relative position for Subjekt.
Try varying the width and height of Subjekt (Note that I have set it to inline-block too for the element as inline elements- which is the default display type- will not take the width or height)
Set height and width of the before element as 100%.
I gave z-index: -1 to the place the before behind.
.Subjekt {
position: relative;
width: 200px;
height: 200px;
display: inline-block;
}
.Subjekt:before {
position: absolute;
background-image: url(http://placehold.it/100x100);
background-size: 100% 100%;
display: inline-block;
width: 100%;
height: 100%;
content:"";
z-index: -1;
}
<p>
<span class="Subjekt">Vater</span>
<span class="Praedikat">bringt</span>
</p>
Hope you can take it forward from here. Let me know your feedback on this. Thanks!
What's the proper way to position an HTML element according to a center handle?
In this example:
XXXXXXXXX
|
|
123px
Assume the element should be position at absolute position left: 123px; but the text should be centered at that point, not start at it. The element text is dynamic, so I have no way of setting a static negative margin-left on it.
Is there a pure CSS way to achieve this? The JS way of measuring offsetWidth and then setting left after calculating width / 2 won't neccesarily work in my case due to various limitations.
One posibility is to set a transform translateX -50%
p {
position: relative;
display: inline-block;
left: 100px;
transform: translateX(-50%);
}
<p>ONE</p>
<br>
<p>TWO, LONGER</p>
<br>
<p>THREE, the longest</p>
It's fairly easy to achieve that and there are several ways to do it. Since you didn't post any HTML construct for your example, I'll just make up some.
The trick is to have an inline-block parent element which has the desired offset (123px) and inside that element you'll have another inline-block element with a left margin of -50%. Position both relative and you'll have the effect you are looking for.
#container {
position: relative;
}
#line {
width: 100px;
height: 100px;
left: 123px;
position: absolute;
border-left: 1px solid red;
}
#text {
left: 123px;
top: 50px;
display: inline-block;
position: relative;
}
#text p {
position: relative;
background: green;
margin-left: -50%;
display: inline-block;
color: #fff;
text-align: center;
padding: 10px;
box-sizing: border-box;
}
<div id="container">
<div id="line">
<-- 123px
</div>
<div id="text">
<p>
This is some dynamic text<br>the div has no absolute set width.
</p>
</div></div>
There are other ways as mentioned, probably depends on your general layout/HTML structure. I would definitely take a look at the flex-box properties, this might also be suitable here.
If you want to play around with it, here's a fiddle.
Some of various ways to do this with css:
If your element is a block:
.element{
width: 200px; /* Full width */
left: 50%;
margin-left: -100px; /* Half width */
position: absolute;
display: block;
}
or, if you're using css3:
.element{
width: 200px; /* Full width */
left: calc(50% - 100px);
position: absolute;
display: block;
}
You can also have a non-absolute approach, but the parent element position should be relative:
.element-parent{
position: relative;
}
.element-parent .element{
margin: 0 auto;
}
If you use text-oriented element (inline-block), this works with IE 7+:
.element-parent{
text-align: center;
}
.element-parent .element{
display: inline-block;
}
I have a problem with the heigth of the div.divB element in this code:
<div class="divA">
<img src="http://lorempixel.com/1000/130"/>
<div class="divB">
<span>Text text</span>
</div>
</div>
See this jsfiddle.
Why my is div.divB.height != div.divA.height? But his height is 100%.
I want it so that " text text " is in the middle.
EDIT:
Height image is random, because image file is uploading by User. In this example I use 130 but can be 200 or 50.
That is because you are declaring the height of the table to be 100px, which is 30px less than the height of the image. If you update that value to 130px, it should work as intended:
.divB{
display: table;
width: 100%;
height: 130px;
position: absolute;
top: 0px;
left: 0px;
}
See fiddle.
Alternatively, you might want to consider other approaches if your image element has a dynamic, non-static height. You can use (1) the translate by -50% approach, or (2) the flexbox approach.
For the translate by -50% approach, this works by simply forcibly stretching the parent container, .divB, to the size of its wrapping parent, by setting all four cardinal values to 0. After that, we position the inner child by 50% from the top, and then offset it vertically upwards by half of its height—that's when the translate by -50% trick kicks in:
.divB{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
.divB > span{
display: block;
transform: translateY(-50%);
padding-left: 120px;
position: absolute;
top: 50%;
font-size: 1.8rem;
color:white;
}
See alternative solution #1.
For the flexbox approach, we repeat the first step in the first solution—setting all cardinal offsets to 0—and then simply using the flexbox specification and align the inner element to the vertical center by using align-items: center:
.divB {
display: flex;
align-items: center;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
See alternative solution #2.
Firstly, divA is still set to block, so while it may have an image which is only 1000px wide, it will continue being wider than that image, setting the element to display: inline-block will help make sure that its widths are set fine.
Next, you need to set the height of divB to the same as divA. In this case its 130px.
You are also using padding for to centre the text, when you should really be using the text-align: center; ability.
Below is the full example
.divA {
position: relative;
display: inline-block;
overflow: auto;
}
.divB {
display: table;
width: 100%;
height: 130px;
position: absolute;
top: 0px;
left: 0px;
}
.divB > span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 1.8rem;
color: white;
}
<div class="divA">
<img src="http://lorempixel.com/1000/130" />
<div class="divB">
<span>Text text</span>
</div>
</div>
I want to center a paragraph which is positioned absolute inside another div positioned relative. The problem is since this is absolute I can't use text-align: center! Also I want to center the paragraph both vertically and horizontally.. .
My HTML looks like this
<div class="top">
<p class="same">Django</p>
</div>
CSS
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
}
I want the paragraph text 'Django' to be in the center both vertically and horizontally
(http://i.imgur.com/MNcaBYs.jpg)
You don't need absolute positioning at all to achieve what you want :
.top { width: 100%; height: 70px; text-align: center; }
.same { display: inline; line-height: 70px; }
You can force paragraphs to have inline layout and then center them horizontally using text-align: center. To center them vertically just add line-height to paragraph equal to container's height (it is not a problem here as you container's height is fixed). If you don't want to set display: inline explicitly, you can just use span instead of p.
JSFiddle
You can achieve that in following way.
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
height: 50%; /* This is mandatory i.e. this should not be auto */
text-align: center;
width: 70%; /*This is not mandatory*/
/* The code below is required to horizontally and vertically center the <p> element */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}