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
Related
I have a link and i want that it is always at the bottom of the page. I tryed display: flex and align-items: flex-end but the problem is the div isn't going till the bottom of the page. I could just do margin-top: 375px but I want that it is at the bottom at a phone and a computer can someone help?
sorry for my bad english
This is what you're looking for:
Like others said, bottom: 0 and position: fixed is what you need.
width: 100% will stretch the div across the page.
When you add fixed to an element, it then becomes independent of all other elements, which makes it tricky to position. I added left: 50%; and transform: translate (-50%, 0); it helps center the element to the page.
Source: (Center aligning a fixed position div)
div.bottom-nav {
background-color: #232323;
width: 100%;
height: 55px;
line-height: 55px;
text-align: center;
position: fixed;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
a {
color: white;
}
<div class="bottom-nav"><a href=#>Click me</a>
</div>
I would try adding this to the element you want to stick to the bottom.
position: fixed;
bottom: 0;
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I'm not sure how I would go about centering an image and then have a link floated up against the right side of the image and maintain the images position of true center. The following image is a mock up of what I am attempting.
I'm hoping there's a simple way to accomplish this using only css
You can use positioning to set the image to horizontal center with setting margin: 0 auto on the wrapper and the text in absolute position to this centered wrapper div:
.wrapper {
margin: 0 auto;
width: 150px;
position: relative;
}
.wrapper a {
position: absolute;
right: -100px;
top: 50%;
transform: translateY(-50%);
}
<div class="wrapper">
Learn more >
<img src="http://placehold.it/150x150">
</div>
Here is one way of doing it.
Apply position: relative to both the image and the link. Set a left margin of 50% to the image.
Use the left offset to move both the image and the link over by half the width of the image (assuming the image has a fixed/non-responsive width).
Using the left margin on the link to control the white space between the image and the link.
.wrap {
border: 1px dashed gray;
}
img {
margin-left: 50%;
position: relative;
left: -50px;
vertical-align: middle;
}
a {
position: relative;
left: -50px;
margin-left: 10px;
}
<div class="wrap">
<img src="http://placehold.it/100x100">
Learn More
</div>
This might be a dumb question, but I am having a hard time figuring this out. I have some dynamic content that can vary in height. Below this, I have a row of static images but with dynamic texts attached to the image. I want to attach the text to the div in the center, and whenever the dynamic content ABOVE changes, it will push down this div accordingly, with the text fixed in the center. I also want a text fixed onto the right side. Right now, I have manually set the text in the center but this obviously does not work because whenever the screen or content changes, the image is pushed down, but not the text.
https://jsfiddle.net/t1z4tn47/2/
#text {
position: absolute;
right: 540px;
top: 100px;
}
#number {
position: absolute;
right: 470px;
}
#wrapper {
display: inline-block;
}
<div id="somecontent">
some dynamic content here, height will vary and always push the wrapper div below
</div>
<div id="wrapper">
<img src="https://twibbon.s3.amazonaws.com/2012/82/d78470a4-3812-4faf-bfc8-e525d02378d1.png" alt="">
<span id="text">HELLO</span>
<span id="number">#1</span>
</div>
<img src="http://www.callrail.com/wp-content/upload/2016/05/Yellow-200x200.jpg" alt="">
You may use translate transform after set the position of text
http://www.w3schools.com/css/css3_2dtransforms.asp
#wrapper{
position: relative;
}
#text{
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#number{
position: absolute;
top: 0;
right: 0;
}
#wrapper{
display:inline-block;
}
edit to match comments below
See fiddle https://jsfiddle.net/t1z4tn47/8/
I added position: relative; to the wrapper, this will let you change the absolute positioning of the child elements RELATIVE to the wrapper. Thus, if you add text on top and the boxes move down, the number and text will move with it.
#text{
position:absolute;
right: 50%;
top: 50%;
margin-top: -8px;
margin-right: -26px;
}
#number{
position: absolute;
right: 0;
top: 0;
}
#wrapper{
display:inline-block;
position: relative;
}
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.